@ 总 结 了 作者 多 年 网 页 设计 应 用 经 验 和 教学 心得 
图 系统 讲解 了 网 页 制作 与 网 站 组 建 的 要 点 和 难点 
@ 实例 众多 、 图 例 丰富 、 实 用 性 强 
@ 提供 丰富 的 课堂 练习 和 课 后 习题 
@ 附 赠 大 容量 、 高 品质 素材 和 案例 













与 网 站 组 建 标准 教程 


《2018-2020 版 ) 杨 继 萍 “编著 
es 
msn, Avnm (B) a A 


 @ se rn 


紧 贴 实际 ， 案 例 导航 


斌 壮大 尝 册 版 社 


< 











网 页 设计 与 网 站 组 建 
标准 教程 
(2018-2020 版 》 





内 容 简 介 


本 书 系统 全 面 地 介绍 了 网 页 设计 与 网 站 组 建 的 知识 和 技能 。 本 书 共 分 为 11 章 ， 内 容 涉及 网 页 基础 
知识 、 创 建 Web 站 点 、 网 页 文件 、 网 页 基础 元 素 、 网 页 链接 和 多 媒体 、 网 页 表单 、CSS 基础 、 网 页 表 
格 和 Div 标签 、 网 页 高 级 设计 、 网 页 交互 行为 、ASP 及 数据 库 基础 等 。 本 书 各 章 注重 实例 间 的 联系 和 
功能 间 的 难 易 层 次 ， 并 对 软件 应 用 过 程 中 可 能 出 现 的 问题 、 难 点 和 重点 给 予 了 详细 讲解 和 特别 提示 。 
本 书 结构 编排 合理 ， 实 例 丰富 ， 适 合作 为 高 等 院 校 相关 专业 教材 ， 也 可 以 作为 网 页 设计 的 自学 参考 
用 书 。 


本 书 封面 贴 有 清华 大 学 出 版 社 防伪 标签 ， 无 标签 者 不 得 销售 。 
版 权 所 有 ， 侵 权 必 究 。 侵 权 举 报 电话 : 010-62782989 13701121933 


图 书 在 版 编目 (CIP) 数据 


网 页 设计 与 网 站 组 建 标准 教程 (2018 一 2020 版 )/ 杨 继 薄 编著. 一 北京 : 清华 大 学 出 版 社 ，2018 
(清华 电脑 学 堂 ) 
ISBN 978-7-302-47598-9 


I. @ 网 … IT. @ 杨 … 三. 外 网 页 制作 工具 -教材 ”加 网 站 -建设 -教材 IV. CDTP393.092 
中 国 版 本 图 书馆 CIP 数据 核 字 (2017) 第 153461 号 


责任 编辑 : 冯 志 强 薛 阳 
封面 设计 : 杨 玉 芳 
责任 校对 : 徐 俊 伟 
责任 印 制 : 宋 林 


出 版 发 行 : 清华 大 学 出 版 社 
网 址 : http://www.tup.com.cn, http://www:wqbook.com 
地 址 : 北京 清华 大 学 学 研 大 厦 A 座 邮 ” 编 : 100084 
社 总 机 : 010-62770175 邮 ” 购 : 010-62786544 
投稿 与 读者 服务 : 010-62776969，c-service@tup.tsinghua.edu.cn 
质量 反馈 : 010-62772015，zhiliang@tup.tsinghua.edu.cn 
: 北京 国 马 印刷 厂 
: 全 国 新 华 书店 
: l85mmX260mm 印 张 :21 插页 :1 字 数 : 498 千 字 
: 2018 年 1 月 第 1 版 印 次 : 2018 年 1 月 第 1 次 印刷 
: 1 一 3000 
59.80 元 


浊 


六 呈 革 沁 责 台 
地 湾 污 计 蓝本 





十 
到 
这 
避 


: 070265-01 


IJ 


前 


Dreamweaver 是 Adobe 公司 推出 的 一 款 集 网 页 制作 和 网 站 管理 于 一 身 的 所 见 即 所 得 
网 页 编辑 器 ， 不 仅 可 以 帮助 不 同 层次 的 用 户 快速 设计 网 页 ， 还 可 以 借助 其 内 置 的 功能 使 
上 ASP、JSP、PHP、ASPNET 和 CFML 等 服务 器 语言 为 网 站 服务 ， 深 受 网 页 开发 设计 
人 员 的 青睐 。 

本 书 以 Dreamweaver CC 2015 为 基本 工具 ， 详 细 介绍 如 何 通过 Dreamweaver 设计 网 
站 的 界面 和 图 形 ， 以 及 ASP 基础 编程 技术 和 以 Access 为 主 的 数据 库 技术 。 


1. 本 书 内 容 介绍 


全 书 系统 全 面 地 介绍 网 页 制作 与 网 站 组 建 的 应 用 知识 ， 每 章 都 提供 了 课堂 练习 ， 用 
来 巩固 所 学 知识 。 本 书 共 分 为 11 章 ， 内 容 概括 如 下 : 

第 1 章 : 全 面 介绍 了 网 页 基础 ， 包 括 网 页 的 构成 、 静 态 网 页 、 动 态 网 页 、 数 据 库 、 
W3C 概述 、XHTML 概述 、 网 站 开发 流程 等 基础 知识 。 

第 2 章 : 全 面 介绍 了 创建 Web 站 点 ， 包 括 站 点 概述 、 安 装 IIS 服务 器 、 建 立 虚 拟 目 
录 、 配 置 IS 服务 器 、 创 建站 点 、 编 辑 站 点 、 导 入 /导出 站 点 设置 、 测 试 站 点 等 基础 知识 。 

第 3 章 : 全 面 介绍 了 网 页 文件 ， 包 括 创建 网 页 文档 、 设 置 页 面 属 性 、 设 置 文件 头 标 
签 、【 文 件 】 面 板 、 操 作文 件 和 文件 夹 、 查 找 和 定位 文件 、 庶 盖 文 件 和 文件 夹 、 存 回 和 取 
出 文件 、 同 步 文件 等 基础 知识 。 

第 4 章 : 全 面 介绍 了 网 页 基础 元 素 ， 包 括 设置 文本 属性 、 插 入 特殊 文本 、 应 用 项 目 
列表 与 编号 、 顽 套 项 目 列表 、 设 置 HTML 样式 、 设 置 段落 样式 、 创 建 网 页 图 像 、 设 置 图 
像 属 性 、 使 用 图 像 热点 等 基础 知识 。 

第 5 章 : 全 面 介 绍 了 网 页 链接 和 多 媒体 ， 包 括 创建 文本 链接 、 创 建 图 像 链 接 、 创 建 
锚 记 链接 、 创 建 脚 本 链接 、 创 建 电子 邮件 链接 、 插 入 Flash 动画 、 插 入 Flash 视频 、 插 入 
HTML 媒体 等 基础 知识 。 

第 6 章 : 全 面 介绍 了 网 页 表单 ， 包 括 表 单 概述 、 插 入 表单 、 添 加 文本 元 素 、 添 加 网 
页 元 素 、 添 加 月 和 周 元 素 、 添 加 日 期 时 间 元 素 、 添 加 选择 元 素 、 添 加 按钮 元 素 等 基础 
知识 。 

第 7 章 : 全 面 介绍 了 CSS 基础 ， 包 括 CSS 样式 、 使 用 【CSS 设计 器 】 面 板 、CSS 
选择 器 、CSS 选择 方法 、 设 置 布局 样式 、 设 置 边框 样式 、 设 置 背景 样式 、 使 用 CSS 过 渡 
效果 等 基础 知识 。 

第 8 章 : 全 面 介绍 了 网 页 表格 和 Div 标签 , 包括 插入 Div 标签 、 编 辑 Div 标签 、CSS 
控制 页 面 元 素 样式 、 插 入 表格 、 媒 套 表格 、 操 作 单元 格 、 排 序数 据 、 导 入 /导出 表格 数据 
等 基础 知识 。 

第 9 章 : 全 面 介绍 了 网 页 高 级 设计 ， 包 括 创 建 模板 、 编 辑 模板 、 创 建 库 项 目 、 应 用 
库 项 目 、 流 动 布局 、 浮 动 布局 、 绝 对 定位 布局 、 插 入 IFrame 框架 、 链 接 IFrame 框架 页 


























面 等 基础 知识 。 

第 10 章 : 全 面 介 绍 了 网 页 交互 行为 ， 包 括 设置 文本 信息 行为 、 设 置 窗口 信息 行为 、 
设置 图 像 信 息 行 为 、 设 置 跳 转 信息 行为 、 设 置 效 果 行 为 、JavaScript 概述 、JavaScript 基 
础 知识 、JavaScript 语句 等 基础 知识 。 

第 11 章 : 全 面 介绍 了 ASP 及 数据 库 基 础 ， 包 括 ASP 基础 、ASP 语法 介绍 、ASP 控 
制 语 句 、ASP 内 置 对 象 、ADO 概述 、ADO 对 象 、 连 接 数据 库 等 基础 知识 。 


2. 本 书 主要 特色 


口 系统 全 面 “本 书 提供 了 20 个 应 用 案例 , 通过 实例 分 析 、 设 计 过 程 讲解 网 页 设计 
与 网 站 组 建 的 应 用 知识 ， 涵 盖 了 Dreamweaver 中 的 各 个 模板 和 功能 。 

口 课堂 练习 ” 本 书 各 章 都 安排 了 课堂 练习 ， 全 部 围绕 实例 讲解 相关 内 容 ， 灵 活 生 
动 地 展示 了 网 页 制作 和 网 站 组 建 各 模板 的 功能 。 课 堂 练习 体现 本 书 实例 的 丰富 
性 ,方便 读者 组 织 学 习 。 每 章 后 面 还 提供 了 思考 与 练习 ， 用 来 测试 读者 对 本 章 内 
容 的 掌握 程度 。 

口 全 程 图 解 “各 章 内 容 全 部 采用 图 解 方式 ， 图 像 均 做 了 大 量 的 裁 切 、 拼 合 、 加 工 ， 
信息 丰富 ， 效 果 精 美 ， 阅 读 体验 轻松 ， 上 手 容易 。 


3. 本 书 使 用 对 象 


本 书 从 网 页 设计 与 网 站 组 建 的 基础 知识 入 手 ， 全 面 介绍 了 Dreamweaver CC 2015 面 
向 应 用 的 知识 体系 。 本 书 可 供 高 职高 专 院 校 学 生 学 习 使 用 ， 也 可 作为 个 人 用 户 深 入 学 习 
Dreamweaver CC 2015 的 参考 资料 。 

参与 本 书 编写 的 人 员 除 了 封面 署名 人 员 之 外 ， 还 有 寺 伟 伟 、 王 浴 敏 、 张 起 、 冉 洪 艳 、 
夏 丽华 、 谢 金玲 、 张 振 、 吕 咏 、 王 修 红 、 雇 亚 臣 、 刘 红 娟 、 程 博文 等 人 。 由 于 水 平 有 限 ， 
玻 漏 之 处 在 所 难免 , 欢迎 读者 朋友 登录 清华 大 学 出 版 社 的 网 站 www.tup.com.cn 与 我 们 联 
系 ， 帮 助 我 们 改进 提高 。 
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本 昨 导 司 灯 手 沪 洁 习 


洪 豚 茹 


8 
Wo 


SN 
el 
Do 
D 
SO 
六 
SO 
版 





Intemet 中 的 网 页 内 容 各 异 , 然 而 多 数 网 页 都 是 由 一 些 基 本 的 版 块 组 成 的 ,包括 Logo、 
导航 条 、Banner、 内 容 版 块 、 版 尾 和 版 权 等 。 


1. Logo 图 标 


Logo 是 企业 或 网 站 的 标志 ， 是 徽标 或 者 商标 的 英文 说 法 , 起 到 对 微 标 拥有 公司 的 识 
别 和 推广 的 作用 ， 通 过 形象 的 Logo 可 以 让 消费 者 记 住 公司 主体 和 品牌 文化 。 网 络 中 的 
Logo 徽标 主要 是 各 个 网 站 用 来 与 其 他 网 站 链接 的 图 形 标志 , 代表 一 个 网 站 或 网 站 的 一 个 
版 块 。 例 如 ， 微 软 的 Logo， 如 图 
1-1 所 示 。 


2. 导航 条 和 图 1-1 ,Logo 图 标 


导航 条 是 网 站 的 重要 组 成 标 
签 。 合 理 安 排 的 导航 条 可 以 帮助 济 
览 者 迅速 查找 需要 的 信息 。 例 如 ， 
新 浪 网 的 导航 条 ， 如 图 1-2 所 示 。 


3. Banner 














告 。 多 数 Bone 0 a 

技术 或 Flash 技术 制作 , 通过 一 些 在 图 1-2 导航 条 

动画 效果 , 展示 更 多 的 内 容 , 并 吸引 用 | 
户 观看 ， 如 图 1-3 所 示 。 SEE 


4. 内 容 版 块 


网 页 的 内 容 版 块 通常 是 网 页 的 主 革 S | 

体 部 分 。 这 一 版 块 可 以 包含 各 种 文本 、 二 2 
图 像 、 动 画 、 超 链接 等 。 例如， 蔡司 光 = | = 伸 
学 网 站 的 内 容 版 块 ， 如 图 1-4 所 示 。 


5. 版 尾 版 块 1-3 Banner 


版 尾 是 网 页 页 面 最 底 端 版 块 ， 通 常 放置 网 站 的 联系 方式 、 友 情 链 接 和 版 权 信息 等 内 
容 ， 如 图 1-5 所 示 。 





外 再 相 且 月 
全 机 们 科 钙 


网 页 可 以 从 技术 上 分 为 静态 网 页 或 者 动态 网 页 。 静态 网 页 是 指 网 站 的 网 页 内 容 “ 固 


定 不 变 ” 当 用 户 浏览 器 通过 互联 
网 的 HITP (HyperText Transport 
Protocol) 协议 向 Web 服务 器 请 求 
提供 网 页 内 容 时 , 服务 器 仅仅 是 将 
原 已 设计 好 的 静态 HTML 文档 传 
送 给 用 户 浏 览 器 ， 如 图 1-6 所 示 。 
随 着 技术 的 发 展 ， 在 HIML 
页 面 中 添加 样式 表 、 客 户 端 脚本 、 
Flash 动画 、Java Applet 小 程序 和 
ActiveX 控件 等 ， 使 页 面 的 显示 效 
果 更 加 美观 和 生动 。 但 是 ， 这 只 不 1.4 
过 是 视觉 动态 效果 而 已 , 它 仍然 不 
具备 与 客户 端 进行 交互 的 功能 。 常 见 的 静态 页 面 以 html 或 者 htm 为 扩展 名 ， 如 图 1-7 所 示 。 


服务 器 


= 客户 器 请 求 页 














这 工作 81 刚 ! 周一 可 同时 和 30 34100 | 食 寻 工作 9 同 ， 风 一至 司 5 999 2| ， 
:TET | tell: mE :ao 0s: i620 A | 
去 放牧 :性 寻宝 而 间 W 秩 风 问题 内 己 失 让 给 as 3| > 


(对 每 一 个 用 户 都 是 一 样 的 页 面 ) 


- 一 一- =- = 客户 六 请 求 页 
和 图 1-5_, 版 尾 版 块 和 图 1-6_, 工 作 流程 











这 里 说 的 动态 网 页 , 与 网 页 上 的 各 
种 动画 、 滚 动 字幕 等 视觉 上 的 “动态 效 
果 ” 没 有 直接 关系 ,动态 网 页 可 以 是 纯 | 
文字 内 容 ， 也 可 以 是 包含 各 种 动画 的 内 
容 ， 这 些 只 是 网 页 具体 内 容 的 表现 形 
式 ， 无 论 网 页 是 否 具有 动态 效果 ， 采 用 
动态 网 站 技术 生成 的 网 页 都 称 为 动态 
网 页 。 

动态 网 页 在 于 可 以 根据 先前 所 制 人 了 图 ]-7 .静态 页 面 
定好 的 程序 页 面 ， 根 据 用 户 的 不 同 请 求 从 而 返回 其 相应 的 数据 。 动 态 页 面 常见 的 扩展 名 
有 .asp、.php、-jsp、.c&i 等 。 

动态 网 面 的 优点 是 效率 高 、 更 新 快 、 移 植 性 强 ， 从 而 快速 地 达到 所 见 即 所 得 的 目的 ， 
但 是 它 的 优点 同样 也 是 它 的 缺点 ， 其 工作 流程 如 图 1-8 所 示 。 

动态 页 面 通常 可 以 通过 网 站 后 台 管 理 系 统 对 网 站 的 内 容 进行 更 新 管理 ， 而 前 端 显示 
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的 内 容 可 以 随 着 后 台数 据 更 改 而 改变 ， 如 发 布 新 闻 、 发 布 公司 产品 、 交 流 互 动 、 博 客 、 
学 校 网 页 等 ， 如 图 1-9 所 示 。 


客户 端 B 










EL ET EY 





gy 各 1 | 证件 寻访 | 视听 说; 
ag — - ， 


《了 图 1-8_。 工 作 流程 AT 图 1-9 动态 网 页 
下 面 就 常见 的 几 种 动态 网 页 技术 来 做 简单 的 介绍 。 
1. ASP 技术 


ASP (Active Server Pages， 动 态 服务 网 页 ) 是 微软 公司 开发 的 一 种 由 VBScript 脚本 
语言 或 JavaScript 脚本 语言 调用 | 


FSO (File System Object, 文件 系 服务 器 en ta 
| 实现 的 去 > 请 求 ASP 页 面 











车 

技术 。 返回 执行 结果 a 
ASP 技术 必须 通过 Windows Spa, 

的 ODBC 与 后 台数 据 库 通信 ， | es 


此 只 能 应 用 于 Windows 服务 器 


Ne 脚本 引 
中 。ASP 技术 的 解释 器 包括 黄种， 名 


即 Windows 9X 系统 的 PWS 和 
Windows NT 系统 的 IS， 如 图 数据 库 


1-10 所 示 。 J 图 1-10 ASP 技术 


2. ASPNET 技术 


ASPNET 是 由 微软 公司 开发 的 | 上 
ASP 后 续 技术 , 其 可 由 C#、VB.NET、 2 
Perl 及 Python 等 编程 语言 编写 ， 通 过 区 
调用 System.Web 命名 空间 实现 各 种 ASPNET 
网 页 信息 处 理工 作 。 页 面 
ASPNET 技术 主要 应 用 于 
Windows NT 系统 中 , 需要 IIS 及 .NET Page 类 
Framework 的 支持 。 通 过 Mono 平台 ， 
ASPNET 也 可 以 运行 于 其 他 非 


Windows 系统 中 ， 如 图 1-11 所 示 。 ” 纪 ] 图 1-11 .ASP.NET 技术 


nnn raeons mer snouihn om. | 


3. JSP 技术 


JSP (JavaServer Pages，Java 服务 网 页 ) 是 由 太阳 计算 机 系统 公司 开发 的 ， 用 Java 
编号， 动态 生成 HIML、XML 或 其 他 格式 文档 的 技术 。 








9 | 








JSP 技术 可 应 用 于 多 种 平台 ， 包 括 六 = 次 清 
Windows、Linux、UNIX 及 Solaris。JSP ms 对 客户 端 A 的 
技术 的 特点 在 于 ， 如 果 客 户 端 第 一 次 访 的。 | 本 
| 结果 返回 客户 器 二 一 | 于 
问 JSP 页 面 ， 服 务 器 将 现 解释 源 程序 的 “客户 路 A i 
Java 代码 ， 然 后 执行 页 面 的 内 容 ， 因 此 保存 至 服务 器 
速度 较 慢 。 如 果 客 户 端 是 第 二 次 访问 ， 动态 Web 服 
则 服务 器 将 直接 调用 Servlet， 无 须 再 对 D4 和 
代码 进行 解析 ,因此 速度 较 快 ,如 图 1-12 pg 
所 示 。 SR 得 

客户 端 B 
4. PHP 技术 Cy 加 ii 这 JSP 技术 


PHP (Personal Home Page， 个 人 主页 ) 也 是 一 种 跨 平台 的 网 页 后 台 技 术 ， 最 早 由 丹 
麦 人 Rasmus Lerdorf 开发 ， 并 由 PHP Group 和 开放 源 代码 社 群 维护 ， 是 一 种 免费 的 网 页 
脚本 语言 。 

PHP 是 一 种 应 用 广泛 的 语言 ,其 多 在 服务 器 端 执行 , 通过 PHP 代码 产生 网 页 并 提供 
对 数据 库 的 读 取 。 


数据 库 是 “按照 数据 结构 来 组 织 、 存 储 和 管理 数据 的 仓库 ”。 在 日 常 工作 中 ， 常常 需 
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要 把 某 些 相关 的 数据 放 进 “ 仓 库 ” 并 根据 管理 的 需要 进行 相应 的 处 理 。 

大 家 知道 数据 库 是 用 于 存储 数据 内 容 的 ， 而 对 生活 中 一 个 事件 或 者 一 类 问题 ， 如 何 
将 它们 存储 到 数据 库 中 呢 ? 在 学 习 数据 库 之 前 ， 先 来 了 解 一 下 数据 库 的 概念 。 下 面 来 介 
绍 一 下 数据 库 的 一 些 基 本 概念 ， 有 助 于 更 好 地 了 解数 据 库 。 


1. 数据 与 信息 


为 了 了 解 世界 、 交 流 信息 ， 人 们 需要 描述 事物 。 在 日 常生 活 中 ， 可 以 直接 用 自然 语 
言 (如 汉语 ) 来 描述 。 如 果 需 要 将 这 些 事物 记录 下 来 ， 即 将 事物 变 成 信息 进行 存储 。 而 
信息 是 对 客观 事物 属性 的 反映 ， 也 是 经 过 加 工 处 理 并 对 人 类 客观 行为 产生 影响 的 数据 表 
现形 式 。 

例如 ， 在 计算 机 中 ， 为 了 存储 和 处 理 这 些 事物 ， 需 要 抽象 地 描述 这 些 事物 的 特征 ， 
而 这 些 特征 ， 正 是 在 数据 库 中 所 存储 的 数据 。 数 据 是 描述 事物 的 符号 记录 ， 描 述 事物 的 
符号 可 以 是 数字 ， 也 可 以 是 文字 、 图 形 、 图 像 、 声 音 、 语 言 等 多 种 表现 形式 。 

下 面 以 “学 生 信息 表 ” 为 例 ， 通 过 学 号 、 姓 名 、 性 别 、 年 龄 、 系 别 、 专 业 和 年 级 等 
内 容 ， 来 描述 学 生 在 校 的 特征 。 


(08060126 王 海 平 男 ”21 科学 与 技术 ”计算 机 教育 ”一 年 级 ) 
在 这 里 的 学 生 记录 就 是 信息 。 在 数据 库 中 ， 记 录 与 事物 的 属性 是 对 应 的 关系 ， 其 表 
现 如 图 1-13 所 示 。 


We (i) a em 
21 


记录 (信息 ) 一 | 08060126 











和 图 1-13 记录 信息 


可 以 把 数据 库 理 解 为 存储 在 一 起 的 相互 有 联系 的 数据 集合 ， 数 据 被 分 门 别 类 、 有 条 
不 率 地 保存 。 而 应 用 于 网 站 时 ， 则 需要 注意 一 些 细节 问题 ， 即 这 些 特征 需要 用 字母 〈 英 
文 或 者 拼音 ) 来 表示 ， 避 免 不 兼容 性 问题 的 发 生 。 例 如 ， 对 于 描述 用 户 注册 信息 ， 如 图 
1-14 所 示 。 











和 | 图 1-14 网 站 中 数据 存储 


其 中 ， 每 个 特征 中 字母 所 代表 的 含义 如 表 1-1 所 示 。 
3 表 1-1 字段 特征 的 含义 





用 于 自动 产生 的 编号 。 该 编号 将 从 1 开始 进行 累加 ， 每 条 记录 加 1 
代表 “用 户 名 ”。 用 于 记录 用 户 的 名 称 ， 可 以 包含 中 文 或 者 英文 ， 也 称 为 “昵称 ” 





代表 “用 户 密码 ”用 于 记录 用 户 登 录 时 所 使 用 的 密码 信息 
代表 “性 别 ”。 记录 用 户 的 性 别 ， 如 “ 男 ”或 者 “ 女 ” 这 里 用 gil 或 boy 表示 
代表 “头像 地 址 ”。 存储 一 个 图 像 所 在 的 文件 地 址 








综 上 所 述 ， 数 据 库 (DataBase，DB) 是 存储 在 一 起 的 相关 数据 的 集合 ， 这 些 数据 是 
结构 化 的 ， 无 有 害 的 或 不 必要 的 见 余 ， 并 为 多 种 应 用 服务 ， 数据 的 存储 独立 于 使 用 它 的 
程序 ， 对 数据 库 插入 新 数据 ， 修 改 和 检索 原 有 数据 均 能 按 一 种 公用 的 和 可 控制 的 方式 进 
行 。 当 某 个 系统 中 存在 结构 上 完全 分 开 的 若干 个 数据 库 时 ， 则 该 系统 包含 一 个 “数据 库 
集合 ”。 这 是 Martin 给 数据 库 下 的 一 个 比较 完整 的 定义 。 


因此 ， 以 Access 数据 库 为 











> 2 图 学生 信息 表 于 避 
NR 从 » |、 
例 ， 可 以 将 这 人 数据 仓库 ”以 可 号 “| 交加 -| 但 别 -| 中 生 年 月 “| 专业 编 叶 -| 下 
表 的 形式 表现 出 来 。 其 中 ， 每 条 目 2i2 三 Ri 
记录 中 存储 的 内 容 即 所 指 的 信 [osz600 。 由 虫 男 1982-04-26 012 04 本 | 
0 0426002 史 艳 娇 1985-05-08 021 06 本 
息 。 例如， 在 “学 生 信 息 表 ” 表 0502001 刘 同 斌 男 1984-11-11 031 05 本 
一 f 3 > 0502002 吴 兆 玉 女 1983-01-07 031 05 本 
中 ， 显 示 了 每 位 学 员 的 数据 存储 0503001 何 利 女 1987-08-05 042 05 本 
z 的 | 悟 二 0504001 攀 叶 女 1981-11-12 021 05 本 
到 表 的 情况 ， 如 图 1-15 所 示 。 0504002 孙 明 女 1982-05-12 022 05 本 
0601001 史 观 田 男 1985-04-13 051 06 本 
3. 数据 库 管 理 系统 0601002 。。 贾 庆 华 男 1986-11-25 053 06 本 
0603001 女 1985-08-07 041 06 可 > 
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数据 库 管理 系统 (DataBase 
Management System，DBMS ) 是 全 J 图 1-15 存储 信息 
一 种 操纵 和 管理 数据 库 的 大 型 软件 ， 是 用 于 建立 、 使 用 和 维护 数据 库 的 。 它 对 数据 库 进 
行 统 一 的 管理 和 控制 ， 以 保证 数据 库 的 安全 性 和 完整 性 。 

用 户 通 过 DBMS 访问 数据 库 中 的 数据 ， 数 据 库 管理 员 也 通过 DBMS 进行 数据 库 的 
维护 工作 。DBMS 提供 多 种 功能 ， 可 使 多 个 应 用 程序 和 用 户 用 不 同 的 方法 在 同时 或 不 同 
时 刻 去 建立 、 修 改 和 询问 数据 库 。 主 要 包括 以 下 几 方 面 的 功能 。 

1) 数据 定义 功能 





























DBMS 提供 数据 定义 语言 |ESREREIE SR 
(Data Definition Language, DDL )， = | 各 - 
用 户 通过 它 可 以 方便 地 对 数据 库 | 二 画 
中 的 数据 对 象 进行 定义 。 例如 , 在 | 本 从 一 一 到 一 一 一 人 
Access 数据 表 中 , 可 以 定义 数据 的 攻 一 上 一 
类 型 、 数 据 的 属性 〈 如 字段 大 小 、 | 中 
格式 ) 等 ， 如 图 1-16 所 示 。 六 一 一 \ 

2) 数据 操纵 功能 




















DBMS 还 提供 数据 操纵 语言 [了 图 1-16 .定义 数据 
(Data Manipulation Language, 
DML)， 用 户 可 以 使 用 DML 操纵 数据 ， 实 现 对 数据 库 的 基本 操作 ， 如 查询 、 插 入 、 删 除 
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和 修改 等 。 例 如 ， 在 “学 生 信 息 表 ” 表 中 ， 右 击 任意 记录 ， 执 行 【 删 除 记 录 】 命 令 ， 即 
可 删除 数据 内 容 ， 如 图 1-17 所 示 。 


















































国 学 生 信息 表 - OO x 
0411002 郑 晓 明 女 1985-02-05 052 04 专 
0412001 周 暑 彬 女 1983-06-04 032 04 专 
0426001 1982-04-26 012 0 
050 名 “新 3 好 男 1984-11-11 031 05 本 
oo x 1983-01-07 031 05 本 
050 女 1987-08-05 042 05 本 

bl 
050 % es | 女 1981-11-12 021 05 本 
050 明和 MO 女 1982-05-12 022 05 本 
060 鹿 和 芭 四 | 田 1985-04-13 051 06 本 
060 + 男 1986-11-25 053 06 本 
bm 1985-08-07 041 08 本 | 
记录 《第 4 3 项 ”Mp | 和 无 入 运 匡 二 » 
图 1-17 _ 删 除 记录 


3) 数据 库 的 运行 管理 

数据 库 在 建立 、 运 用 和 维护 时 ， 由 数据 库 管 理 系统 统一 管理 、 控 制 ， 以 保证 数据 的 
安全 性 、 完 整 性 。 

4) 数据 库 的 建立 和 维护 功能 

它 包 括 数据 库 初始 数据 的 输入 、 转 换 功 能 ， 数 据 库 的 转 储 、 恢 复 功 能 ， 数 据 库 的 管 
理 重组 功能 和 性 能 监视 、 分 析 功 能 等 。 这 些 功能 通常 是 由 一 些 实用 程序 完成 的 。 


oo nso 


4. 数据 库 的 作用 


在 动态 网 站 建设 中 ， 数 据 库 发 挥 着 不 可 替代 的 作用 。 它 用 于 存储 网 站 中 的 信息 ， 可 
以 包含 静止 的 和 经 常 需要 更 换 的 内 容 。 通 过 对 数据 库 中 相应 部 分 内 容 的 调整 ， 可 以 使 网 
站 的 内 容 更 加 灵活 ， 并 且 对 这 些 信息 进行 更 新 和 维护 也 更 加 方便 、 快 捷 。 

1) 新 闻 系统 

如 果 要 在 网 站 中 放置 新 闻 ， 其 更 新 的 频率 往往 比较 大 ， 而 通过 数据 库 功 能 可 以 快速 
地 发 布 信息 ， 而 且 很 容易 存储 以 前 的 新 闻 ， 便 于 网 站 浏览 者 和 管理 者 查阅 ， 同 时 也 避免 
了 直接 修改 主要 页 面 ， 以 保持 网 站 的 稳定 性 ， 如 图 1-18 所 示 。 

2) 产品 管理 

产品 管理 是 网 站 数据 库 的 重要 应 用 ， 如 果 网 站 中 有 大 量 的 产品 需要 展示 和 买卖 ， 那 
么 使 用 数据 库 可 以 方便 地 进行 分 类 ， 把 产品 更 有 条 理 、 更 清晰 地 展示 给 客户 ， 并 且 方 便 
日 后 的 维护 、 检 索 与 储存 ， 如 图 1-19 所 示 。 

3) 收集 信息 

普通 的 静态 页 面 是 无 法 收集 浏览 者 的 信息 的 ， 而 管理 者 为 了 加 强 网 站 的 营销 效果 ， 
往往 需要 搜集 大 量 潜在 客户 的 信息 ， 或 者 要 求 来 访 者 成 为 会 员 ， 从 而 提供 更 多 的 服务 ， 
如 图 1-20 所 示 。 





要 闻 导 读 


美 政府 七 千 亿美 元 救市 方案 被 众议院 否决 


[ 煌 市 计划 和 何 遭 否 块 ? ][ 白 宫 夫 清 ][ 众 议院 周 四 再 会 呈 ][ 滞 动 ] 
[六 由 径 历 里 色 星 戎 一 道 措 叉 路 创 纪 录 ][ 花 旗 格 购 半 联 扣 行 ][ 专 题 ] 
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“新 反 报 ; 监管 根 行 服 务 涨 作 负 应 未 而 兴 * 媒体 称 周正 龙 案 一 审 有 两 大 疑点 评 : 我 们 部 是 法 二 





“长 江 商 报 : 周 EE 龙 案 , 我 们 都 是 法 讶 
“人 民 日 振 ; 飞天 路 上 的 壮 本 M 名 
“新 让 报 ; 出 舱 屠 一 蔓 多 像 “母体 分 效 ” 
"半月 谈 ; 还 有 多 少 “制度 "应当 诬 止 


~ 【[ 国 是 座 议院 ] 七 十 年 代 最 流行 的 写 人 证 好 
[省 海 电 月 谈 ] 提 秘 穆 经 国 近 十 年 的 晤 外 情 
- [国际 掠 户 各] 地 就 是 未 来 的 已 本 天 皇 
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“广州 日 报 : 重 奖 公 务 员 苍 职 创业 有 违 社会 公平 “广西 得 遇 罕见 洪水 17 死 6 失踪 653 万 余人 受灾 组 图 ~ [体育 天 空 ] “我 的 奥运 ”作品 大 赛 



































到 
和 | 图 1-18 ,新 闻 系 统 
免 更 珊 支 休闲 杖 新 款 上 市 更 多 
全 可 作用 机 ee 10.1 国 庆 专 可 礼 包 精 沁 + 优惠 
锡 现 豆 阅 卡 其 售 NEY i 
咎 他 所 , \ 
扯 樟 | , 
棉 晓 衫 入 
机 痛心 = Et 9 
长 宾 攀 地 入 10 1 长 民风 间 ， 正 值 秋装 车 场 之 时 ， 无 
了 衣 龟 活 90 灾 本 绎 全 要 和 FPOL 旺 身长 补 T 色 大 由 处 卫 家 论 你 是 准备 出 门 及 行 ， 还 是 在 家 休养 生 
大 处 卫 胡 JEY 直 锣 蔓 条 猴 黑白 条 术 麻 东 息 ， 都 希 要 增 潮 衣 服 。 我 们 精心 拱 卫 了 
入 原 协 六 999-68 现价 228 00 。。 原价 站 299-98 现价 半 165.00 。。 原价 329-68 现价 半 199.00 四 个 大 礼包 ， 快 来 各 职 所 生 吧 。 
休 亲 西 屎 mY 畅销 排行 榜 
se 害 拉 袜子 Plo’ 
视 补 全 加 ra 
ob 中 多 委 牛 涩 坊 全 棉 守 
岂 码 专区 on egt 
| ,wa | | ,wa | 
po 全 柳 免 江 直 简 卡 下 洲 gp 全 棉 休 亲本 服 @ 生 fhe0 公 里 全 柳 守 
0 元 一 100 元 术 古 大 Dead 她 a 
101 元 -200 元 原价 全 329-99 现价 全 199.00 ER 现价 时 146.00 原价 芭 599-99 现价 侍 399.00 





和 | 图 1-19 产品 管理 


4) 搜索 功能 

如 果 站 内 提供 有 大 量 的 信息 而 没有 搜索 功能 ， 浏 览 者 只 能 依靠 清晰 的 导航 系统 ， 而 
对 于 一 个 新 手 往往 要 花 些 时 间 搜 索 网 页 ， 有 时 候 甚至 无 法 达到 目的 。 此 时 ， 提 供 方便 的 
站 内 搜索 不 仅 可 以 使 网 站 结构 清晰 ， 而 且 有 利于 需求 信息 的 查找 ， 节 省 浏览 者 的 时 间 ， 
如 图 1-21 所 示 。 

5) BBS 论坛 

BBS 对 于 企业 而 言 ， 不 仅 可 以 增加 与 访问 者 的 互动 ， 更 重要 的 是 可 以 加 强 售 前 、 售 
后 服务 和 增加 新 产品 开发 的 途径 。 利 用 BBS 可 以 收集 客户 反馈 信息 ， 对 新 产品 以 及 企业 
发 展 的 看 法 、 投 诉 等 ， 增 强 企 业 与 消费 者 的 互动 ， 提 高 客户 服务 质量 和 效率 ， 如 图 1-22 
所 示 。 





















全 2 区 守 注册 信息 中 wb) 








一 个 识字 为 两 个 


BB" 不 能 租 改 > 


子 符 ， 痊 丰 使 用 中 文员 名 。 一 瑟 汉 币 成 功 : 





[字符 四 夸 ， 读 全 用 美文 于 十 有 关于 过往 瑟 的 和 


0] 
不 能 单 焰 使 月 世 立 字 斑 。 娄 字 或 符号 人 区 你 的 空 双 。 


再 奏 和 一遍 码 : 请 更 输入 一 四 外 上 面 的 入 节 生 三 - 











夫子 部件: 设 有 电子 邮件 ? 志方 推荐 证 划 邮 行 点 击 入 穴 汪 表 


丙 同 X- 订 直 了 吨 必 :+ ”生生 姑 上面 吉 入 和 了 闻 地 址 。 
请 丝 入 将 的 于 所 号 到 这 并 不 是 少 须 的 ， 但 建议 获 首 写 ， 以 方便 区 使 用 和 于 的 各 项 服务 】 
手机 号 三 : 务 攻 征 入 各 动 或 坷 联通 手机 号 三 





























和 图 1-20 收集 信息 
变 置 济 宝 为 首页 。 得 要 买 | 吃 要 责 | 我 的 淘宝 淘 宝 网 均 桂 宝 | 阿里 扯 星 。 名 于 助 中 心 





快速 注册 。 各 何 买 / 避 
者 外 用 户口。 1 元 担 
玉器 安全 限时 失 购 


手机 淘宝 | 的 条 | 三 由 开 大 
生理 调 | 江 伯 本 由 | 同 过 拍 实 











人 网 移 首 过 标 训 兄 史 局 哆 
+ 产 失 五 折 正 卓 李 了 询 宝 网 先行 娩 付 ， 免 除 你 的 后 网 之 锭 
种 本 自打 工 彼 这 





《了 图 1-21 搜索 信息 
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和 图 1-22 BBS 论坛 





1.2” W3C 概述 





网 页 标准 化 体系 (W3C) 是 由 万 维 网 联盟 (World Wide Web Consortium) 建立 的 一 
种 规范 网 页 设计 的 标准 集 。 

基于 网 页 标准 化 体系 ， 网 页 的 设计 者 可 以 通过 简单 的 代码 ， 在 多 种 不 同 的 浏览 器 平 
台中 显示 一 个 统一 的 页 面 。 该 体系 的 建立 ， 大 大 提高 了 设计 人 员 开 发 网 页 的 效率 ， 减 轻 
了 网 页 设计 工作 的 复杂 性 ， 免 去 了 人 们 编写 兼容 性 代码 的 麻烦 。 


网 页 标准 化 是 针对 网 页 代码 开发 提出 的 一 种 具体 的 标准 规范 。 自 从 世界 上 第 一 个 网 
页 浏览 器 World Wide Web 在 1990 年 诞生 以 来 ， 网 页 代码 的 编写 长 期 没有 一 个 统一 的 规 
范 ， 而 是 依靠 一 种 只 包含 少量 标签 的 HIML (HyperText Markup Language， 超 文本 标记 
语言 ) 作为 基本 的 编写 语言 。 

1993 年 ， 第 一 款 针对 个 人 用 户 的 网 页 浏览 器 Mosaic 出 现 ， 极 大 地 引发 了 互联 网 的 
热潮 ， 受 到 了 很 多 用 户 的 欢迎 。Mosaic 也 是 第 一 种 支持 网 页 图 像 的 浏览 器 ， 在 Mosaic 
浏览 器 中 ， 开 发 者 为 HTML 定义 了 <img> 标 签 ， 以 方便 地 显示 图 像 ， 如 图 1-23 所 示 。 

早期 的 HTML 语法 被 定义 为 松散 的 规 
则 ， 因 此 诞生 了 众多 的 版 本 ， 既 包括 1982 国 ee eeee 人 
年 开发 的 原始 版 本 ， 又 包括 大 量 增 强 的 版 丹 吕 | 
本 。 版 本 的 混乱 使 得 很 多 网 页 只 能 在 某 一 种 
特定 的 浏览 器 下 才 被 正常 浏览 。 为 了 保证 网 
页 在 尽 可 能 多 的 用 户 浏览 器 中 正常 显示 ， 网 
页 设计 者 必须 耗费 更 多 的 精力 。 

1994 年 网 景 公 司 的 NetScape Navigator 
浏览 器 诞生 。 几 乎 与 此 同时 ， 微 软 公司 通过 
收购 的 方式 发 行 了 Intemet Explorer 浏览 器 。 
自 此 ， 网 景 公司 和 微软 公司 在 争夺 网 页 浏览 
器 市 场 时 进行 了 一 场 为 时 3 年 的 “浏览 器 大 =- 
战 "。 在 这 场 竞争 中 ， 双 方 都 为 浏览 器 添加 ” 央 EE 1 wae Pom5 人 Mee 
了 一 些 独 有 的 标签 。 这 一 举动 又 造成 了 大 量 
互 不 兼容 的 网 页 产生 ， 使 设计 兼容 多 种 浏览 人 图 23。Mosaic 3.0 for Windows 
器 的 网 页 变 得 非常 困难 。 

1995 年 ， 人 们 为 避免 因 浏览 器 竞争 而 导致 的 开发 困难 ， 提 出 了 建立 一 种 统一 的 
HTML 标准 ， 以 适应 所 有 浏览 器 平台 。 这 一 标准 最 初 被 称 为 HIML+ 计 划 ， 后 被 命名 为 
HTML 2.0。 由 于 缺乏 浏览 器 的 支持 ，HTML 2.0 并 未 成 为 实际 的 标准 。 

1996 年 ， 刚 成 立 的 W3C 继承 了 HIML 2.0 的 思路 , 提出 了 HTML 3.0 标准 ， 并 根据 
该 标准 提供 了 更 多 新 的 特性 与 功能 , 加 入 了 很 多 特定 浏览 器 的 元 素 与 属性 。 1996 年 1 月 ， 
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W3C 公布 了 HTML 3.2 标准 ， 并 正式 成 为 大 多 数 网 页 浏览 器 支持 的 标准 。 自 此 ， 网 页 标 
准 化 开始 为 绝 大 多 数 网 页 设计 者 所 重视 。 

随 着 多 媒体 技术 的 发 展 与 个 人 计算 机 性 能 的 快速 提高 ， 简 单 的 文字 与 图 像 已 经 不 能 
满足 用 户 的 需求 ， 因 此 ，W3C 逐渐 为 网 页 标准 化 添加 了 更 多 元 素 。 其 将 HTML 标准 定 
义 为 网 页 标准 化 结构 语言 ， 并 增加 了 网 页 标准 化 表现 语言 一 一 CSS (Cascading Style 
Sheets， 层 琶 样 式 表 ) 技术 以 及 符合 ECMA (ECMA 国际 ， 一 个 国际 信息 与 电信 标准 化 
组 织 ,前 身 为 欧洲 电气 工业 协会 ) 标 准 的 网 页 标准 化 行为 语言 一 一 ECMAScript 脚本 语言 。 

2000 年 1 月 ，W3C 发 布 了 结合 XML (eXtensible Markup Language， 可 扩展 的 标记 
语言 ) 技术 和 HTML 的 新 标记 语言 XHTML (eXtensible HyperText Markup Language, 可 
扩展 的 超 文本 标记 语言 )， 并 将 其 作为 新 的 网 页 标准 化 结构 语言 。 

目前 ，XHTML 语言 已 经 成 为 网 页 编写 的 首选 结构 语言 ， 其 不 仅 应 用 在 普通 的 计算 
机 中 ， 还 被 广泛 应 用 于 智能 手机 、PDA、 机 顶 盒 以 及 各 种 数字 家 电 等 。 由 XHTML 延伸 
出 的 多 种 标准 ， 为 各 种 数字 设备 所 支持 。 


作为 整个 网 页 标准 化 体系 的 支撑 ， 网 页 结构 语言 经 历 了 从 传统 混合 了 描述 与 结构 的 
HTML 语言 到 如 今 结构 化 的 XHTML 语言 ， 其 间 发 生 了 巨大 的 变化 。 


1. 传统 HTML 结构 语言 


传统 HTML 结构 语言 是 指 基于 HIML 3.2 及 之 前 版 本 的 HTML 语言 .早期 的 HTML 
结构 语言 只 能 够 描述 简单 的 网 页 结构 ， 包 括 网 页 的 头 部 、 主 体 以 及 段落 、 列 表 等 。 随 着 
人 们 对 网 页 美观 化 的 要 求 越 来 越 高 ，HIML 被 人 们 添加 了 很 多 扩展 功能 。 例 如 ， 可 表示 
文本 的 颜色 、 字 体 的 样式 等 。 

功能 的 逐渐 增多 ， 使 得 HTML 成 为 了 一 种 混合 结构 性 语句 与 描述 性 语句 的 复杂 语 
言 。 例 如 ， 在 HTML 3.2 中 ， 既 包含 了 表示 结构 的 <head>、<title> 和 <body> 等 标签 ， 也 
包含 了 描述 性 的 <b>、<font> 等 标签 。 

大 量 复杂 的 描述 性 标签 使 得 网 页 更 加 美观 , 但 同时 也 导致 了 网 页 设计 的 困难 。 例 如 ， 
在 进行 一 个 简单 的 、 内容 非常 少 的 网 页 设计 时 , 可 以 通过 HTML 3.2 中 的 <font> 标 签 对 网 
页 中 的 文本 进行 描述 ， 代 码 如 下 。 


<font size=3 color=blue> 这 是 一 段 蓝 色 3 号 文字 。</font> 


然而 ， 在 对 大 量 不 同样 式 的 文本 进行 描述 时 ，HIML 3.2 版 本 就 显得 力不从心 了 。 
网 页 的 设计 者 不 得 不 在 每 一 句 文字 上 添加 <font> 标 签 ， 并 书写 大 量 的 代码 。 这 些 相同 的 
标签 除了 给 书写 造成 麻烦 以 外 ， 还 容易 发 生 嵌 套 错误 ， 给 浏览 器 的 解析 带 来 困难 ， 造 成 
网 页 文档 的 腑 肿 。 
因此 ， 随 着 网 页 信息 内 容 的 不 断 丰 富 以 及 互联 网 的 不 断 发 展 ， 传 统 的 HTML 结构 语 
言 已 不 堪 重 负 ， 人 们 迫切 需要 一 种 新 的 、 简 便 的 方式 来 实现 网 页 的 模块 化 ， 降 低 网 页 开 
发 的 难度 和 成 本 。 








2. XHTML 结构 语言 


XHTML 结构 语言 是 一 种 基于 HIML 4.01 与 XML 的 新 结构 化 语言 。 其 既 可 以 看 作 
是 HTML 4.01 的 发 展 和 延伸 ， 又 可 以 看 作 是 XML 语言 的 一 个 子 集 。 

在 XHTML 结构 语言 中 , 据 弃 了 所 有 描述 性 的 HTML 标签 , 仅 保留 了 结构 化 的 标签 ， 
以 减 小 文件 内 容 对 结构 的 影响 ， 同 时 减少 网 页 设计 人 员 输 入 代码 的 工作 量 。 


W3C 对 XHTML 标签 、 属 性 、 属 性 值 等 内 容 的 书写 格式 做 了 严格 规范 ， 以 提高 代码 
在 各 种 平台 下 的 解析 效率 。 无 论 是 在 计算 机 中 ， 还 是 在 智能 手机 、PDA 手持 计算 机 、 机 
顶 盒 数 字 设 备 中 ，XHTML 文档 都 可 以 被 方便 地 浏览 和 解析 。 


网 页 的 标准 化 不 仅 需 要 结构 的 标准 化 ， 还 需要 表现 的 标准 化 。 早 期 的 网 页 完全 依靠 
HTML 中 的 描述 性 标签 来 实现 网 页 的 表现 化 ， 设 置 网 页 中 各 种 元 素 的 样式 。 随 着 HTML 
3.2 被 大 多 数 网 站 停止 使 用 ， 以 及 HTML 4.01 和 XHTML 的 不 断 普及 ， 人 们 人 迫切 地 需要 
一 种 新 的 方式 来 定义 网 页 中 各 种 元 素 的 样式 。 

在 之 前 的 章节 中 ， 已 经 介绍 了 HIML 3.2 在 描述 大 量 文本 的 样式 时 暴露 的 问题 。 为 
了 解决 这 一 问题 ， 人 们 从 面向 对 象 的 编程 语言 中 引入 了 类 库 的 概念 ， 通 过 在 网 页 标签 中 
添加 对 类 库 样 式 的 引用 ， 实 现 样 式 描述 的 可 重用 性 ， 提 高 代码 的 效率 。 这 些 类 库 的 集合 ， 
就 被 称 作 CSS 层 县 样式 表 (简称 CSS 样式 表 或 CSS)。 


1. CSS 样式 表 


CSS 样式 表 是 一 种 列表 ， 其 中 可 以 包含 多 种 定义 网 页 标签 的 样式 。 每 一 条 CSS 的 样 
式 都 包含 3 个 部 分 ， 其 规范 写法 如 下 所 示 。 


Selector { Property : value } 


在 上 面 的 伪 代 码 中 ， 各 关键 词 的 含义 如 下 。 

口 Selector 选择 器 ， 相 当 于 表格 表 头 的 名 称 。 选 择 器 提供 了 一 个 对 网 页 标签 的 接 
口 ， 供 网 页 标签 调用 。 

口 Property 属性 ， 是 描述 网 页 标签 的 关键 词 。 根据 属性 的 类 型 ， 可 对 网 页 标签 的 
多 种 不 同属 性 进行 定义 。 

口 value 属性 值 ， 是 描述 网 页 标签 不 同属 性 的 具体 值 。 
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在 CSS 中 , 允许 为 某 一 个 选择 器 设置 多 个 属性 值 , 但 需要 将 这 些 属性 以 半角 分 号 “;” 
隔 开 ， 其 写法 如 下 所 示 。 


Selector { Propertyl : valuel ; Property2 : value } 


同时 ，CSS 还 允许 对 同一 个 选择 器 的 相同 属性 进行 重复 描述 。 由 于 各 种 浏览 器 在 解 
析 CSS 代码 时 使 用 逐 行 解析 的 方式 ， 因 此 这 种 重复 描述 将 以 最 后 一 次 进行 的 描述 内 容 为 
准 。 例 如 ， 一 个 名 为 simpleClass 的 类 中 先 描述 ， 所 有 文本 的 颜色 为 红色 〈 考 F0000)， 然 
后 再 描述 该 类 中 所 有 文本 的 颜色 为 绿色 (#00FF00)， 如 下 所 示 。 


simpleClass { color : #ff£f0000 } 
simpleClass { color : #00ff00 } 


在 上 面 的 代码 中 ， 对 simpleClass 中 的 内 容 进 行 了 重复 描述 ， 根 据 逐 行 解析 的 规则 ， 
最 终 显示 的 这 些 文本 颜色 将 为 绿色 。 用 户 也 可 将 这 两 个 重复 的 样式 写 在 同一 个 选择 器 中 ， 
代码 如 下 所 示 。 


simpleClass { color : #ff0000 ; color : #00ff00 } 


2. CSS 的 颜色 规范 


网 页 标签 的 样式 包含 多 种 类 型 ， 其 中 ， 最 常见 的 就 是 颜色 。CSS 允许 用 户 使 用 多 种 
方式 描述 网 页 标签 的 样式 ， 包 括 十 六 进 制 数值 、 三 原色 百分比 、 三 原色 比例 值 和 颜色 的 
英文 名 称 4 种 方法 。 

1) 十 六 进 制 数值 

十 六 进 制 数值 是 最 常用 的 颜色 表示 方法 ,其 将 颜色 拆 分 为 红 、 绿 、 蓝 三 原色 的 色 度 ， 
然后 通过 6 位 十 六 进 制 数字 表示 。 其 中 ， 前 两 位 表示 红色 的 色 度 ， 中 间 两 位 表示 绿色 的 
色 度 ， 后 两 位 表示 蓝 色 的 色 度 ， 并 在 十 六 进 制 数字 前 加 “# ”号 以 方便 识别 。 


rl 


例如 ， 以 十 六 进 制 数值 分 别 表示 红色 、 绿 色 、 蓝 色 和 黑色 、 白 色 等 颜色 ， 如 表 1-2 
所 示 。 
5 表 1-2 三 原色 与 黑色 、 白 色 的 十 六 进 制 数值 
十 六 进 制 数值 十 六 进 制 数值 








2) 三 原色 百分比 

三 原色 百分比 也 是 一 种 CSS 色彩 表示 方法 。 在 三 原色 百分比 的 表示 方法 中 , 将 三 原 
色 的 色 度 转换 为 百分比 值 ， 其 中 ， 最 大 值 为 100%， 最 小 值 为 0%。 例 如 ， 表 示 白 色 的 方 
法 如 下 。 


rgb (100%,100%,100%) 


其 中 ， 第 一 个 百分比 值 表示 红色 ， 第 二 个 百分比 值 表示 绿色 ， 第 三 个 百分比 值 表示 
蓝 色 。 

3) 三 原色 比例 值 

三 原色 比例 值 是 将 十 六 进 制 的 三 原色 色 度 转换 为 3 个 十 进 制 数字 ， 然 后 再 进行 表示 
的 方法 。 其 中 ， 第 一 个 数字 表示 红色 ， 第 二 个 数字 表示 绿色 ， 第 三 个 数字 表示 蓝 色 。 每 
一 个 比例 数值 最 大 值 为 255， 最 小 值 为 0。 例如 ， 表 示 黄 色 〈 寿 FFF00)， 如 下 所 示 。 

Eggb(255725570h) 

4) 颜色 的 英文 名 称 

除了 以 上 几 种 根据 颜色 的 色 度 表示 色彩 的 方式 以 外 ，CSS 还 支持 XHTML 允许 使 用 
的 16 种 颜色 英文 名 称 来 表示 颜色 。 这 16 种 颜色 英文 名 称 如 表 1-3 所 示 。 
3 表 1-3 16 种 颜色 的 英文 名 称 表 


颜 色 名 
纯 黑 

















3. CSS 长 度 单位 

在 度量 网 页 中 各 种 对 象 时 ， 需 要 使 用 多 种 单位 ， 包 括 绝对 单位 和 相对 单位 。 绝 对 单 
位 是 指 网 页 对 象 的 物理 长 度 单位 ， 而 相对 单位 则 是 根据 显示 器 分 辩 率 大 小 、 可 视 区 域 、 
对 象 的 父 容器 大 小 而 定义 的 单位 。CSS 的 可 用 长 度 单位 主要 包括 以 下 几 种 。 


口 in 英寸 是 在 欧美 国家 使 用 最 广泛 的 英制 绝对 长 度 单位 。 

口 cm 厘米， 国际 标准 单位 制 中 的 基本 绝对 长 度 单位 。 

口 mm 毫米 ， 在 科技 领域 最 常用 的 绝对 长 度 单位 。 

口 pt 磅 ， 在 印刷 领域 广泛 使 用 的 绝对 长 度 单位 ， 也 称 点 ， 约 等 于 1/72 英寸 。 

口 pica 派 卡 ， 在 印刷 领域 广泛 使 用 的 绝对 长 度 单位 ， 又 被 缩写 为 pc， 约 等 于 1/6 
英寸 。 

口 em CSS 相对 单位 ， 相 当 于 在 当前 字体 大 小 下 大 写字 母 M 的 高 度 ， 约 等 于 当前 
字体 大 小 。 


口 ex CSS 相对 单位 ， 相 当 于 在 当前 字体 大 小 下 小 写字 母 x 的 高 度 ， 约 等 于 当前 字 
体 大 小 的 112。 在 实际 浏览 器 解析 中 ，1lex 等 于 1/2em。 

口 px 计算 机 通用 的 相对 单位 , 根据 屏幕 的 像素 点 大 小 而 定义 的 字体 单位 。 通常 在 
Windows 操作 系统 下 ，1px 等 于 1/96 英寸 . 而 在 Mac 操作 系统 下 ，1px 等 于 1/72 
英寸 。 
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口 百分比 ”百分比 也 是 CSS 允许 使 用 的 相对 单位 值 。 其 往往 根据 父 容 器 的 相同 属 
性 来 进行 计算 。 例 如 ， 在 一 个 表格 中 ， 表 格 的 宽度 为 100px， 而 其 单元 格 宽度 为 
50px， 可 将 该 单元 格 的 宽度 设置 为 50%。 





XHTML 仅仅 是 一 种 结构 化 的 语言 ， 即 使 将 其 与 CSS 技术 结合 ， 也 只 能 制作 出 静态 
的 、 无 法 进行 改变 的 网 页 页 面 。 如 果 需 要 网 页 具备 交互 的 行为 ， 还 需要 为 网 页 引入 一 种 
新 的 概念 ， 即 浏览 器 脚本 语言 。 在 W3C 的 网 页 标准 化 体系 中 ， 网 页 标准 化 行为 的 语言 
为 ECMAScript 脚本 语言 ， 及 为 ECMAScript 提供 支持 的 DOM 模型 等 。 


1. 脚本 语言 


脚本 语言 是 有 别 于 高 级 编程 语言 的 一 种 编程 语言 ， 其 通常 为 缩短 传统 的 程序 开发 过 
程 而 创建 ， 具 有 短小 精怪、 简单 易学 等 特性 ， 可 帮助 程序 员 快 速 完 成 程序 的 编写 工作 。 

脚本 语言 被 应 用 于 多 个 领域 ， 包 括 各 种 工业 控制 、 计 算 机 任务 批 处 理 、 简 单 应 用 程 
序 编写 等 ， 也 被 广泛 应 用 于 互联 网 中 。 根 据 应 用 于 互联 网 的 脚本 语言 解释 器 位 置 ， 可 以 
将 其 分 为 服务 器 端 脚本 语言 和 浏览 器 脚本 语言 两 种 。 

1) 服务 器 端 脚本 语言 

服务 器 端 脚 本 语言 主要 应 用 于 各 种 动态 网 页 技术 ， 用 于 编写 实现 动态 网 页 的 网 络 应 
用 程序 。 对 于 网 页 的 浏览 者 而 言 ， 大 多 数 服务 器 端 脚本 语言 是 不 可 见 的 ， 用 户 只 能 看 到 
服务 器 端 脚本 语言 生成 的 HIMLAXHTML 代码 。 

服务 器 端 脚本 语言 必须 依赖 服务 器 端的 软件 执行 。 常 见 的 服务 器 端 脚本 语言 包括 应 
用 于 ASP 技术 的 VBScript、JScript、PHP、JSP、Perl、CFML 等 。 

2) 浏览 器 脚本 语言 

浏览 器 脚本 语言 区 别 于 服务 器 端 脚本 语言 ， 是 直接 插入 到 网 页 中 执行 的 脚本 语言 。 
网 页 的 浏览 者 可 以 通过 浏览 器 的 查看 源 代码 功能 ， 查 看 所 有 浏览 器 脚本 语言 的 代码 。 

浏览 器 脚本 语言 不 需要 任何 服务 器 端 软件 支持 ， 任 何 一 种 当前 流行 的 浏览 器 都 可 以 
直接 解析 浏览 器 脚本 语言 。 目 前 应 用 最 广泛 的 浏览 器 脚本 语言 包括 JavaScript、JScript 
以 及 VBScript 等 。 其 中 ，JavaScript 和 JScript 分 别 为 Netscape 公司 和 微软 公司 开发 的 
ECMAScript 标准 的 实例 化 子 集 ， 语 法 和 用 法 非常 类 似 ， 因 此 往往 统一 被 称 为 JavaScript 
脚本 。 


2. 标准 化 的 ECMAScript 


ECMAScript 是 W3C 根据 Netscape 公司 的 JavaScript 脚本 语言 制订 的 、 关 于 网 页 行 
为 的 脚本 语言 标准 .根据 该 标准 制订 出 了 多 种 脚本 语言 ,包括 应 用 于 微软 Intemet Explorer 
浏览 器 的 JScript 和 用 Flash 脚本 编写 的 ActionScript 等 。 





ECMAScript 具有 基于 面向 对 象 的 方式 开发 、 语 名 简单 、 快 速 响应 交互 、 安 全 性 好 和 
跨 平 台 等 优点 。 目 前 绝 大 多 数 的 网 站 都 应 用 了 ECMAScript 技术 。 


3. 标准 化 的 文档 对 象 模型 


文档 对 象 模型 (Document Object Model, DOM) 是 根据 W3C DOM 规范 而 定义 的 一 
系列 文档 对 象 接口 。 文 档 对 象 模型 将 整个 网 页 文档 视 为 一 个 主体 ， 文 档 中 包含 的 每 一 个 
标签 或 内 容 都 被 其 视 为 对 象 ， 并 提供 了 一 系列 调用 这 些 对 象 的 方法 。 

通过 文档 对 象 模型 ， 各 种 浏览 器 脚本 语言 可 以 方便 地 调用 网 页 中 的 标签 ， 并 实现 网 
页 的 快速 交互 。 


1.3 XHTML 概述 


XHTML 由 HTML 发 展 而 来 的 一 种 Web 网 页 设计 语言 ,其 目的 是 基于 XML 的 应 用 。 
所 以 ， 从 本 质 上 来 说 , XHTML 是 一 个 过 渡 技 术 , 结合 了 部 分 XML 的 强大 功能 和 大 多 数 
HTML 的 简单 特性 。 
































5 普通 的 HTML 文档 相 比 ， 在 XHTML 文档 的 第 一 行 中 增加 了 <!DOCTYPE> 元 素 ， 

该 元 素 用 来 定义 网 页 文档 的 类 型 。DOCTYPE 是 Document Type (文档 类 型 ) 的 缩写 ， 用 

来 定义 XHTML 文档 的 版 本 ， 使 用 时 应 该 注意 以 下 两 点 。 

口 该 元 素 的 名 称 和 属性 必须 是 大 写 。 

口 DTD (例如 xhtmll-transitional.dtd ) 用 于 表示 文档 的 类 型 定义 ， 其 包含 有 文档 的 
规则 ， 网 页 浏览 器 会 根据 预定 义 的 DTD 来 解析 网 页 元 素 ， 并 显示 这 些 元 素 所 构 
成 的 网 页 。 

对 于 创建 标准 化 的 XHTML 文档 ， 声 明 DOCTYPE 是 必 不 可 少 的 关键 组 成 部 分 。 就 

目前 而 言 ，XHTML 1.0 提供 了 3 种 DID 文档 类 型 ， 并 且 都 可 以 在 Dreamweaver 中 直接 

创建 。 


1. 过 渡 型 


过 渡 型 DID 的 XHTML 文档 在 书写 规则 上 较为 宽松 ， 它 允许 用 户 使 用 HIML 的 元 
素 ， 但 是 一 定 要 符合 XHTML 的 语法 要 求 。 

在 Dreamweaver 中 ,执行 【文件 】| 【新建 】 命令, 打开 【新 建文 档 】 对 话 框 。 然 后 ， 
在 该 对 话 框 右 侧 的 【文件 类 型 】 下 拉 列 表 中 选择 【XHTML 1.0 Transitional】 选 项 ， 即 可 
创建 过 渡 型 DTD 的 XHTML 文档 ， 如 图 1-24 所 示 。 

定义 过 渡 型 XHTML 文档 的 完整 代码 如 下 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.0rg/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 
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在 图 1-24 创建 过 渡 型 DTD 的 XHTML 文档 
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2. 严格 型 


严格 型 DTD 的 XHTML 文档 在 书写 规则 上 较为 严格 ， 它 不 允许 用 户 使 用 任何 描述 
性 的 元 素 和 属性 ， 需 要 完全 按照 XHTML 的 标准 化 规则 来 设计 网 页 。 

创建 严格 型 DTD 的 XHTML 文档 ， 在 【新 建文 档 】 对 话 框 的 【文档 类 型 】 下 拉 列 
表 中 选择 XHTML 1.0 Strict 选项 即 可 ， 如 图 1-25 所 示 。 
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和 图 1-25 创建 严格 型 DID 的 XHTML 文档 
定义 严格 型 XHTML 文档 的 完整 代码 如 下 。 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1l-strict.dtd"> 





3. 框架 型 


框架 型 DTD 是 专门 针对 框架 网 页 所 设计 的 ， 也 就 是 说 ， 如 果 所 要 设计 的 网 页 中 包 
含有 框架 ， 那么 就 需要 使 用 这 种 类 型 的 DTD。 在 最 新 版 本 的 Dreamweaver CC 2015 版 本 
中 没有 了 框架 型 文件 的 创建 选项 ， 如 想 创 建 该 类 型 的 DTD， 需 要 使 用 CC 以 下 版 本 。 例 
如 ， 使 用 Dreamweaver CS 5.5 版 本 创建 DID， 其 具体 操作 方法 如 下 所 述 。 

创建 框架 型 DTD 的 XHTML 文档 ， 首 先 选择 【新 建文 档 】 对 话 框 中 的 【示例 中 的 
页 】 选 项 ， 在 显示 的 【示例 文件 夹 】 选 项 列表 中 选择 【框架 页 】 选 项 。 然 后 ， 在 【示例 
页 】 选 项 列表 中 选择 要 创建 网 页 的 框架 类 型 ， 如 图 1-26 所 示 。 
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和 | 图 1-26 ,创建 框架 型 DTD 的 XHTML 文档 
定义 框架 型 XHTML 文档 的 完整 代码 如 下 。 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http: 
//WwwW .Ww3.0rg/TR/xhtml1/DTD/xhtml1l-frameset .dtd"> 
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XHTML 是 由 XML 语法 演化 而 成 的 ， 因 此 它 遵 循 XML 的 文档 规范 。 在 某 些 浏览 器 
(例如 Intermet Explorer 浏览 器 ) 中 虽然 可 以 正常 解析 一 些 错误 的 代码 ， 但 仍然 推荐 使 用 
规范 的 语法 编写 XHTML 文档 。 

1. 文档 格式 规范 


在 创建 XHTML 文档 时 ， 尽 量 使 用 规范 的 文档 格式 ， 这 样 有 利于 网 页 浏览 器 对 文档 
内 容 的 解析 ， 因此， 可 以 大 大 提高 网 页 的 浏览 速度 。 下 面 介绍 一 些 常 见 的 文档 格式 规范 。 

1) 定义 文档 的 DTD 类 型 

在 XHTML 文档 的 开头 应 该 定义 该 文档 的 DTD 类 型 ， 这 样 可 以 使 网 页 浏览 器 根据 
预定 义 的 DTD 类 型 来 解析 文档 中 的 元 素 。 

过 渡 型 DTD: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.0org/TR/xhtml1/DTD/xhtmll-transitional.dtd"> 


严格 型 DTD: 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtmll-strict.dtd"> 
框架 型 DTD: 

<!DOCTYPE html]l PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" 
"http://www.w3.0org/TR/xhtml1/DTD/xhtmll1-frameset .dtd"> 


2) 声明 命名 空间 

在 XHTML 文档 的 根 元 素 <html> 中 应 该 定义 命名 空间 ， 即 定义 xmlns 属性 ， 代 码 如 
下 所 示 。 

<html xmlns="http://www.w3.0rg/1999/xhtml"> 

3) 区 分 大 小 写 

XHTML 对 大 小 写 是 敏感 的 。 在 XTHML 文档 中 ， 使 用 相同 字母 大 写 和 小 写 所 定义 
的 元 素 是 不 同 的 。 例 如 ，<h> 和 <H> 表 示 的 是 不 同 的 元 素 。 


<h> 这 里 是 小 写 h 元 素 </h> 
<H> 这 里 是 大 写 了 元 素 </H> 


4) 不 要 在 注释 内 容 中 使 用 “--” 
“--” 只 能 出 现在 XHTML 注释 的 开头 和 结束 ， 也 就 是 说 ， 在 内 容 中 它们 不 再 有 效 。 


例如 下 面 的 代码 是 无 效 的 。 
i 注释 --> 
在 注释 中 可 以 用 等 号 (=) 或 者 空格 代替 内 部 出 现 的 虚线 ， 如 下 所 示 。 
攻 司 注定 SEE 亲生 


2. 标签 语法 规范 


在 XHTML 语言 中 ， 每 一 种 元 素 都 是 由 一 个 或 一 对 标签 表示 。 正 是 由 于 这 些 标签 ， 
可 以 为 XHTML 文档 添加 指定 的 元 素 。 然 而 ， 对 于 规范 严格 的 XHTML， 在 使 用 这 些 标 
签 时 应 该 注意 以 下 几 点 。 

1) 闭合 所 有 标签 

在 HIML 中 ， 通 常 习惯 使 用 一 些 独 立 的 标签 ， 例 如 <p>、<li> 等 ， 而 不 会 使 用 相对 
应 的 <p> 和 < 人 i> 标 签 来 关闭 它们 。 但 在 XHTML 文档 中 ， 这 样 做 是 不 符合 语法 规范 的 。 

<p> 这 是 一 个 文字 段落 。 

上 面 的 代码 中 ， 必 须 在 段落 的 末尾 使 用 闭合 标签 将 其 关闭 。 

<p> 这 是 一 个 文字 段落 。</p> 

XHTML 要 求 有 严谨 的 结构 ， 所 有 标签 必须 闭合 。 如 果 是 单独 不 成 对 的 标签 ， 应 该 
在 标签 的 最 后 添加 一 个 “/” 来 关闭 它 。 

<img weight="600" height="450" alt=" 马 尔 代 夫 " src="/images/pic.jpg" /> 


rr aaakaseueaar maaahaa | 


2) 所 有 特殊 符号 用 编码 表示 

在 XHTML 中 ， 必 须 使 用 编码 来 表示 特殊 符号 。 例 如 ， 小 于 号 〈<) 不 是 标签 的 一 
部 分 ， 必 须 被 编码 为 “&lt;”， 大 于 号 (>) 也 不 是 标签 的 一 部 分 ， 必 须 被 编码 为 “人 gt ”; 
与 号 (&&) 不 是 实体 的 一 部 分 ， 必 须 被 编码 为 “&amp ”。 在 HIML 文档 中 ， 可 以 使 用 下 
面 的 代码 。 


<img src="pic.jpg" width="200"” height="200" alt="abc & def"> 

但 是 ， 在 XHTML 文档 中 ， 必 须 将 “&” 更 改 为 “&amp”， 如 下 所 示 。 

<img src="pic.jpg" width="200" height="200" alt="abc &amp def"> 

3) 图 片 标签 必须 有 说 明文 字 

每 一 个 图 片 标签 都 必须 有 ALT 说 明文 字 ， 如 下 所 示 。 

<img width = "1024" height = "768" src = "/images/sky.jpg" alt=" 天 空 "> 


4) 正确 嵌 套 所 有 标签 
在 XHTML 中 ， 当 标签 进行 嵌 套 时 ， 必 须 按照 打开 标签 的 顺序 进行 关闭 。 正 确 嵌 套 
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标签 的 代码 示例 如 下 。 
<i><b> 为 文字 应 用 斜体 和 粗 体 </b></i> 
错误 幅 套 标签 的 代码 示例 如 下 。 
<i><b> 为 文字 应 用 斜体 和 粗 体 </i></b> 


在 XHTML 文档 中 ， 还 有 一 些 严格 强制 执行 的 嵌 套 限制 ， 这 些 限制 包括 以 下 几 点 。 

口 <a> 元 素 中 不 能 包含 其 他 的 <a> 元 素 。 

口 <pre> 元 素 中 不 能 包含 <object>、<big>、<img>、<small>、<sub> 或 <sup> 元 素 。 

口 <button> 元 素 中 不 能 包含 <input>、 <textarea>、 <label>、 <select>、<button>、 <form>、 
<iframe>、<fieldset> 或 <isindex> 元 素 。 

口 <label> 元 素 中 不 能 包含 其 他 的 <label> 元 素 。 

口 <form> 元 素 中 不 能 包含 其 他 的 <form> 元 素 。 


3. 属性 语法 规范 


无 论 是 HIML 还 是 XHTML， 每 一 个 元 素 都 具有 各 自 的 属性 ， 这 些 属 性 可 以 指定 元 
素 的 大 小 、 初 始 值 、 动 作 等 。 在 XHTML 中 使 用 这 些 属性 时 ， 应 该 注意 相应 的 语法 规范 。 

1) 所 有 标签 和 属性 必须 小 写 

XHTML 要 求 所 有 的 标签 和 属性 的 名 称 都 必须 使 用 小 写 。 例 如 ，<BODY> 必 须 写 成 
<body> 。 大 小 写 夹 杂 也 是 不 被 认可 的 ， 通 常 Dreamweaver 自动 生成 的 属性 名 称 
onMouseOver 也 必须 修改 成 onmouseover。 





<img src = "button.jpg" width = "100" height = "25" onmouseover = 

"Index()"/> 

2) 所 有 属性 都 必须 被 赋值 

在 HIML 中 ， 人 允许 没有 属性 值 的 属性 存在 ， 例 如 <td nowrop>。 但 在 XHTML 中 ， 
这 种 情况 是 不 允许 的 ， 它 规定 每 一 个 属性 都 必须 有 一 个 值 。 如 果 属 性 没有 值 ， 则 必须 使 
用 自身 的 名 称 作 为 值 。 

<td nowrop = "nowrop"> 

3) 使 用 id 属性 作为 统一 的 名 称 

XHTML 规范 废除 了 name 属性 ， 而 使 用 id 属性 作为 统一 的 名 称 。 在 正 4.0 及 以 下 
版 本 中 应 该 保留 name 属性 ， 使 用 时 可 以 同时 使 用 name 和 id 属性 。 

<input id = "User" name = "User" width = "200" value = "请 输入 用 户 名 "” /> 


4) 所 有 属性 必须 用 引号 括 起 来 
在 HIML 中 , 可 以 不 需要 为 属性 值 加 引号 , 但 是 在 XHTML 中 则 必须 加 引号 。 例 如 ， 
定义 表格 标签 <table> 的 宽度 为 100%。 


<table width = "100%"></table> 


在 某 些 特殊 情况 下 ， 需 要 在 属性 值 中 使 用 双 引号 〈") 或 者 单 引号 (')， 也 就 是 通常 


所 说 的 引号 的 嵌 套 。 这 样 ， 如 果 使 用 单 引 号 直接 输入 单 引 号 〈'")， 而 使 用 双 引 号 需要 输 
入 “&quot' ”。 


<img width = "600" height = "450" src = "/images/pic.jpg" alt = "say&quot; 
hellogquot;" /> 


XHTML 文档 具有 固定 的 结构 ， 其 中 包括 定义 文档 类 型 、 根 元 素 (html)、 头 部 元 素 
(head) 和 主体 元 素 (body) 4 个 部 分 。 前 面 已 经 介绍 了 定义 文档 类 型 ， 在 本 节 中 将 详细 
介绍 XHTML 文档 的 根 元 素 、 头 部 元 素 和 主体 元 素 。 


1 根 元 素 


html 是 XHTML 文档 中 必须 使 用 的 元 素 ， 用 于 确定 文档 的 开始 和 结束 ， 所 有 的 文档 
内 容 (包括 文 档 头 部 和 文档 主体 内 容 ) 都 包含 在 html 元 素 之 中 。html 元 素 的 语法 结构 
如 下 。 


<html> 文 档 内 容 部 分 </html> 


命名 空间 是 html 元 素 的 一 个 属性 ， 由 xmlns 表示 ， 位 于 html 元 素 的 起 始 标签 中 ， 
用 来 定义 识别 页 面 标签 的 网 址 。 其 在 页 面 中 的 相应 代码 如 下 所 示 。 


<html xmlns="http://www.w3.0rg/1999/xhtml"> 


但 是 ， 即 使 XHTML 文档 中 的 html 元 素 没有 使 用 此 属性 ，W3C 的 验证 器 也 不 会 报 
错 。 这 是 因为 “xmlns = http://www.w3.org/1999/xhtml” 是 一 个 固定 值 ， 即 使 没有 包含 它 ， 
此 值 也 会 被 添加 在 <html> 标 签 中 。 
除 此 之 外 ，html 元 素 还 具有 其 他 属性 ， 其 详细 介绍 如 下 。 
口 class 用 于 显示 元 素 的 类 。 
口 dir 设置 文本 的 方向 。 
口 id 标签 的 唯一 字母 数字 标记 符 ， 用 这 个 ID 来 引用 此 标签 。 
口 lang 用 于 声明 此 文档 的 国家 语言 代码 。 
口 xml:lang 在 文档 被 解释 为 XML 文档 时 保存 本 元 素 的 基本 语言 。 


2. 头 部 元 素 
网 页 头 部 元 素 (head) 也 是 XHTML 文档 中 必须 使 用 的 元 素 ， 其 作用 是 定义 文档 的 
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相关 信息 ， 可 以 包含 title 元 素 、meta 元 素 等 。head 元 素 的 语法 结构 如 下 。 
<head> 头 部 内 容 部 分 </head> 


profile 是 head 元 素 的 一 个 可 选 属性 ， 其 可 存放 包含 与 此 页 面 有 关 的 元 数据 的 URL 
的 列表 , 元 数据 将 与 meta 标签 一 起 返回 。 元 数据 可 以 包含 网 页 文档 的 作者 、 版 权 、 描 述 、 
关键 字 等 信息 。 





在 head 元 素 中 还 可 以 包含 base、link、title 等 其 他 元 素 ， 这 些 元 素 的 详细 介绍 如 下 。 

1) base 

可 以 指定 页 面 中 所 有 链接 的 基准 URL。 基 准 URL 相当 于 一 个 根 目录 ， 它 会 自动 添 
加 到 各 个 用 相对 地 址 定义 的 链接 的 URL 前 面 , 这 其 中 包含 <a>、<img>、<link> 和 <form> 
标签 中 的 URL。 


<base href = "http://127.0.0.1/" target=" blank" /> 





2) link 

定义 文档 与 外 部 资源 的 关系 ， 最 常见 的 用 途 就 是 链接 外 部 的 CSS 样式 表 。link 元 素 
是 空 元 素 ， 它 仅 包含 属性 。 在 用 于 样式 表 时 ，<link> 标 签 得 到 了 几乎 所 有 浏览 器 的 支持 ， 
但 是 几乎 没有 浏览 器 支持 其 他 方面 的 用 途 。 


<link rel="stylesheet" type="text/css" href="theme.css" /> 





3) meta 
用 于 提供 有 关 页 面 的 元 信息 ， 例 如 针对 搜索 引擎 和 更 新 频 度 的 描述 和 关键 词 。 
<meta> 标 签 中 不 包含 任何 内 容 ， 该 标签 的 属性 定义 了 与 文档 相关 联 的 名 称 / 值 对 。 


<meta name="keywords" content=" 网 页 制作 ,XHTML 语言 , HTML 标签 ” /> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 





4) script 

用 于 定义 客户 端 脚 本 ， 例 如 JavaScript。script 元 素 既 可 以 包含 脚本 语句 ， 也 可 以 通 
过 src 属性 指向 外 部 脚本 支持 。 在 XHTML 1.0 Strict DTD 中 ，script 元 素 的 language 属性 
不 被 支持 。 





<script type="text/javascript"> 

document .write ("Hello World!"); 

</script> 

<script type="text/javascript" src="time.js"></script> 


5) style 
用 于 定义 页 面 内 部 的 CSS 样式 表 。<style> 标 签 的 type 属性 是 必需 的 ， 定 义 style 元 
素 的 内 容 ， 唯 一 可 能 的 值 是 “text/css”。 





<style type="text/css"> 
p {color:blue}; 

hl {color:red}; 
</style> 





6) title 
用 于 定义 网 页 文档 的 标题 。 文 档 标题 是 显示 在 浏览 器 标题 栏 中 的 文本 。<title> 标 签 
是 <head> 标 签 中 唯一 要 求 包含 的 元 素 。 


<title> 标 题名 称 </title> 


3. 主体 元 素 


网 页 主体 元 素 (body) 用 来 定义 文档 的 主体 内 容 ， 也 就 是 要 展示 给 用 户 的 部 分 ， 包 
括 文本 、 超 链接 、 图 片 、 表 格 、 列 表 、 音 频 和 视频 等 。 在 body 元 素 中 ， 可 以 包含 所 有 的 
页 面 元 素 ， 其 语法 结构 如 下 所 示 。 

<body> 文 档 主体 部 分 </body> 


在 设计 页 面 时 ， 经 常 需要 在 body 元 素 中 定义 相关 属性 ， 用 来 控制 页 面 的 显示 效果 。 
在 HIML 中 ,， body 元素 的 所 有 “呈现 属性 ” 均 不 被 赞成 使 用 ; 在 XHTML 1.0 Strict DID 
中 ， 所 有 “呈现 属性 ” 均 不 被 支持 。 
口 bgcolor 指定 文档 的 背景 颜色 。 不 赞成 使 用 ， 请 使 用 样式 取代 它 。 
口 background 指定 文档 的 背景 图 片 。 不 赞成 使 用 ， 请 使 用 样式 取代 它 。 
D text 指定 文档 中 文字 的 颜色 。 不 赞成 使 用 ， 请 使 用 样式 取代 它 。 








link 指定 文档 中 链接 的 颜色 。 不 赞成 使 用 ， 请 使 用 样式 取代 它 。 

alink 指定 文档 中 活动 链接 的 颜色 。 不 赞成 使 用 ， 请 使 用 样式 取代 它 。 

vlink 指定 文档 中 访问 过 的 链接 颜色 。 不 赞成 使 用 ， 请 使 用 样式 取代 它 。 

topmargin 设置 文档 上 边 的 空白 大 小 ， 单 位 是 像素 。 不 赞成 使 用 ， 请 使 用 样式 

取代 它 。 

口 leftmargin 设置 文档 左边 的 空白 大 小 ， 单 位 是 像素 。 不 赞成 使 用 ， 请 使 用 样式 
取代 它 。 

口 rightmargin 设置 文档 右边 的 空白 大 小 ， 单 位 是 像素 。 不 赞成 使 用 ， 请 使 用 样 
式 取代 它 。 

口 bottommargin 设置 文档 下 边 的 空白 大 小 ,单位 是 像素 。 不 赞成 使 用 ,请 使 用 样 
式 取代 它 。 

在 <body> 标 签 中 ， 除 了 可 以 使 用 上 述 的 属性 外 ， 还 可 以 为 其 指定 事件 属性 。 这 些 事 

件 属性 使 页 面 在 触发 某 一 动作 时 执行 指定 的 脚本 或 函数 ， 以 完成 相应 任务 。<body> 标 签 

的 事件 属性 介绍 如 下 。 

口 onload 当 文 档 被 载 入 时 执行 脚本 。 

onunload 当 文 档 被 却 下 时 执行 脚本 。 

onclick 当 鼠 标 被 单 击 时 执行 脚本 。 

ondblclick 当 和 鼠标 被 双击 时 执行 脚本 。 

onmousedown 当 饼 标 按钮 被 按 下 时 执行 脚本 。 

onmouseup 。 当 鼠 标 按钮 被 松 开 时 执行 脚本 。 

onmouseover 当 鼠 标 指针 是 停 于 某 元 素 之 上 时 执行 脚本 。 

onmousemove 当 和 鼠标 指针 移动 时 执行 脚本 。 

onmouseout 当 和 鼠标 指针 移出 某 元 素 时 执行 脚本 。 

onkeypress ” 当 键 盘 被 按 下 后 又 松 开 时 执行 脚本 。 

onkeydown ” 当 键 盘 被 按 下 时 执行 脚本 。 

口 onkeyup 当 键 盘 被 松 开 时 执行 脚本 。 

定义 了 以 上 几 个 元 素 后 ， 便 构成 了 一 个 完整 的 XHTML 页 面 ， 而 且 以 上 所 有 元 素 都 

是 XHTML 页 面 所 必须 具有 的 基本 元 素 。 一 个 简单 的 XHTML 页 面 代 码 示例 如 下 。 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www-w3.org/TR/xhtm11/DTD/xhtml11-transitional.dtd"> 


<html xmlns="http://www.-wW3.org/1999/xXhtm1"> 
<head> 


名. 也 -可可 
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<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title> 文 档 标题 </title> 

</head> 

<body > 

<! 一 文档 主体 内 容 --> 

</body> 

</html> 





1.4 网 站 开发 流程 


随 着 计算 机 技术 的 发 展 ， 网 页 的 设计 以 及 网 站 的 开发 已 经 越 来 越 像 一 个 系统 的 软件 
开发 工程 ， 从 前 期 的 策划 、 工 程 案例 的 实施 到 最 后 的 维护 和 更 新 ， 都 需要 辅 以 各 种 专业 
的 知识 。 了 解 这 些 专业 知识 ， 可 以 帮助 用 户 开 发 出 高 质量 的 网 站 ， 同 时 提高 网 站 开发 的 


网 站 建设 是 一 项 由 多 种 专业 人 员 分 工 协 作 的 工作 ， 因 此 ， 在 进行 网 站 建设 之 前 ， 首 
先 应 对 网 站 的 内 容 进 行 策划 。 

在 进行 任何 商业 策划 时 ， 都 需要 以 实际 的 数据 作为 策划 的 基础 。 然 后 才能 根据 这 些 
数据 进行 具体 的 策划 活动 。 


1. 前 期 调研 


在 建立 网 站 之 前 ， 首 先 应 通过 各 种 调查 活动 ， 确 定 网 站 的 整体 规划 ， 并 对 网 站 所 需 
要 添加 的 内 容 进 行 基本 的 归纳 。 

网 站 策划 的 调查 活动 应 围绕 3 个 主要 方面 进行 ， 即 用 户 需求 调查 、 竞 争 对 手 情况 调 
查 以 及 企业 自身 情况 调查 。 

1) 用 户 需 求 调查 

用 户 需 求 是 企业 发 布 网 站 服务 的 核心 。 企 业 的 一 切 经 营 行为 都 应 该 围绕 用 户 切实 的 
需求 来 进行 。 因 此 ， 在 网 站 建设 之 前 ， 了 解 用 户 的 需求 ， 根 据 用 户 需求 确定 网 站 服务 内 
容 是 必须 的 。 

2) 竞争 对 手 情况 调查 

竞争 对 手 是 指 与 企业 所 服务 的 用 户 群体 、 服 务 的 项 目 有 交集 的 其 他 企业 。 在 企业 进 
行 网 站 服务 时 ， 了 解 竞 争 对 手 的 状态 甚至 未 来 的 营销 策略 ， 将 对 企业 规划 网 站 服务 有 很 
大 的 帮助 。 

3) 企业 自身 情况 调查 

“知己 知 彼 ， 百 战 不 列 ” 企业 在 进行 网 上 商业 活动 时 ， 除 了 需要 了 解 对 手 的 情况 外 ， 
还 应 了 解 企业 自身 的 情况 ， 包 括 企业 的 实际 技术 水 平 、 资 金 状 况 等 信息 ， 根 据 企 业 自 身 
情况 来 确定 网 站 服务 的 规模 和 项 目 ， 做 到 “量体裁衣 ”。 


2. 网 站 策划 


在 调查 活动 完成 后 ， 企 业 还 需要 对 调查 的 结果 进行 数据 整合 与 分 析 ， 整 理 所 获得 的 
数据 ， 将 数据 转换 为 实际 的 结果 ， 从 而 定位 网 站 的 内 容 、 划 分 网 站 的 栏目 等 。 同 时 ， 还 
应 根据 企业 自身 的 技术 状况 ， 确 定 网 站 所 使 用 的 技术 方案 。 

网 站 的 栏目 结构 划分 标准 ， 应 尽量 符合 大 多 数 人 理解 的 习惯 。 例 如 ， 一 个 典型 的 企 
业 网 站 栏目 ， 通 常 包括 企业 的 简介 、 新 闻 、 产 品 、 用 户 的 反馈 以 及 联系 方式 等 。 产 品 栏 
目 还 可 以 再 划分 子 栏目 ， 如 图 1-27 所 示 。 



































、 
网 站 的 制作 过 程 主要 包括 网 站 的 前 台 界面 设 二 2 .my 

计 、 页 面 代码 编写 和 后 台 程序 开发 3 个 部 分 。 a 
一 、 电子 产品 

。 前 台 界 面 设计 合 兰 于 BB 
os 网 站 目 eaa 

前 台 设 计 工 作 的 作用 是 设计 网 站 的 整体 色彩 ”首页 | | < 六 sam] | 太 
风格 ， 绘 制 网 站 所 使 用 的 图 标 、 按 钮 、 导 航 等 用 三 三 -加 


户 界面 元 素 。 同 时 ， 还 要 为 网 站 的 页 面 布局 ， 设 

计 网 站 的 整体 效果 等 。 = 
前 台 界面 是 直接 面向 用 户 的 接口 ， 其 设计 直 
接 决 定 了 网 站 页 面 的 界面 友好 程度 ， 决 定 用 户 是 
否 能 够 获得 较 好 的 体验 ， 如 图 1-28 所 示 。 


[了 图 1-27 网 站 结构 
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人) 图 1-28 _, 必 应 界面 





图 1-28 为 微软 公司 所 开发 的 必 应 搜索 引擎 的 界面 。 相 比 传统 的 百度 等 搜索 引擎 界 

面 ， 人 为 用 户 搜索 时 提供 了 完美 的 视 

除 [之 外 ， 在 必 应 搜索 引擎 的 页 面 中 ， 用 户 可 以 通过 鼠标 滑 过 的 方式 ， 查 看 默认 处 

于 隐藏 状态 的 图 像 介绍 信息 ， 使 网 页 的 界面 更 具 趣味 性 。 在 用 户 单 击 右 下 角 的 箭头 后 ， 
还 可 以 更 换 这 些 背 景 图 像 。 


2. 页 面 代码 编写 
在 设计 完成 网 站 的 界面 后 , 还 需要 将 界面 应 用 到 实际 的 网 页 中 。 具体 到 网 站 开发 中 ， 









































就 是 将 使 用 Photoshop 或 Fireworks 设计 的 图 像 转换 为 网 页 浏览 器 可 识别 的 各 种 代码 。 


3. 后 台 程序 开发 


网 站 的 运营 以 及 为 用 户 进行 各 种 服务 ， 依 赖 于 一 个 运行 稳定 、 高 效 的 后 台 程 序 ， 以 
及 一 个 结构 合理 的 数据 库 系 统 。 

后 台 程 序 开发 的 工作 ， 就 是 根据 前 台 界 面 的 需求 ， 通 过 程序 代码 动态 地 提供 各 种 服 
务 信息 。 除 此 之 外 ， 还 应 提供 一 个 简洁 的 管理 界面 ， 为 后 期 网 站 的 维护 打下 基础 。 

网 站 建设 的 技术 发 展 十 分 迅速 ， 企 业 在 建设 网 站 时 ， 人 往往 具 有 多 种 技术 方案 可 供 选 
择 。 例 如 Windows Server 操作 系统 +SQL Server 数据 库 +ASPNET 技术 ,或 Linux 操作 系 
统 +MySQL 数据 库 +PHP 技术 等 。 

常用 的 后 台 程序 开发 语言 主要 包括 ASP、C#、Java、Perl、PHP 这 5 种 。 其 中 ，C# 
语言 主要 用 于 微软 公司 Windows 服务 器 系统 的 ASPNET 后 人 台 程 序 中 ;Java 可 用 于 多 种 
服务 器 操作 系统 的 JSP 后 台 程序 中 ; Perl 可 用 于 多 种 服务 器 操作 系统 的 CGI 以 及 Fast CGI 
(CGI 的 改编 版 本 ) 后 台 程序 中 ， PHP 可 用 于 多 种 服务 器 操作 系统 的 PHP 后 台 程 序 中 。 


在 完成 网 站 的 前 台 界 面 设 计 和 后 台 程序 开发 后 ， 还 应 对 网 站 进行 测试 、 发 布 和 维护 
等 工作 ， 进 一 步 完 善 网 站 的 内 容 。 


1， 网 站 测试 


严格 的 网 站 测试 可 以 尽 可 能 地 避免 网 站 在 运营 时 出 现 种 种 问题 。 这 些 测 试 包括 测试 
网 站 页 面 链接 的 有 效 性 ， 网 站 文档 的 完整 性 、 正 确 性 以 及 后 台 程 序 和 数据 库 的 稳定 性 等 
项 目 。 


2. 网 站 发 布 


在 完成 测试 后 ， 即 可 通过 FTP、SFTP 或 SSH 等 文件 传输 方式 ， 将 制作 完成 的 网 站 
上 传 到 服务 器 中 ， 并 开通 服务 器 的 网 络 ， 使 其 能 够 进行 各 种 对 外 服务 。 

网 站 的 发 布 还 包括 网 站 的 宣传 和 推广 等 工作 。 使 用 各 种 搜索 引擎 优化 工具 对 网 站 的 
内 容 进行 优化 ， 可 以 提高 网 站 被 用 户 检索 的 概率 ， 提 高 网 站 的 访问 量 。 对 于 绝 大 多 数 商 
业 网 站 而 言 ， 访 问 量 就 是 生命 线 。 


3. 网 站 维护 


网 站 的 维护 是 一 项 长 期 而 艰巨 的 工作 , 包括 对 服务 器 的 软件 、 硬件 维护 ， 系 统 升级 ， 
数据 库 优化 和 更 新 网 站 内 容 等 。 
用 户 往往 不 希望 访问 更 新 缓慢 的 网 站 ， 因 此 ， 网 站 的 内 容 要 不 断 地 更 新 。 定 期 对 网 
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站 界面 进行 改版 也 是 一 种 维系 用 户 忠诚 度 的 办 法 。 让 用 户 看 得 到 网 站 的 新 内 容 ， 可 以 吸 


引用 户 继续 对 网 站 保持 信任 和 关注 。 
练习 








下 是 针对 网 页 代码 开发 提 
出 的 一 种 具体 的 标准 规范 。 
2. 第 一 款 针对 个 人 用 户 的 网 页 浏览 器 是 


了 是 一 种 基于 HIML 4.01 
与 XML 的 新 结构 化 语言 。 它 既 可 以 被 看 作 是 
HIML 4.01 的 发 展 和 延伸 ， 又 可 以 被 看 作 是 


的 一 个 子 集 。 
4. 是 网 站 中 的 一 个 页 面 ， 通 
常 是 格式 。 
5. 网 页 版 块 组 成 包括 





、 内 容 版 块 、 版 尾 和 版 权 等 。 
6. 动态 网 页 的 优点 是 效率 高 、 





移植 性 强 。 

7. 与 普通 的 HTML 文档 相 比 ， 在 XHTML 
文档 的 第 一 行 增加 了 元 素 ， 该 元 素 
用 来 定义 网 页 文档 的 类 型 。 

8. 网 站 策划 的 调查 活动 应 围绕 3 个 主要 方 
面 进 行 ， 即 以 
及 企业 自身 情况 调查 。 

二 、 选 择 题 

1. CSS 样式 表 是 一 种 列表 ， 其 中 可 以 包含 
多 种 定义 的 样式 。 

A. 网 页 标签 
B. 网 页 
C. W3C 
D. HIML 


2. 2000 年 1 月 ，W3C 发 布 了 结合 XML 技 
术 和 HTML 的 新 标记 语言 ， 并 将 其 作 


为 新 的 网 页 标准 化 结构 语言 。 
A. DIV 
B. CSS 
C. XHTML 
D. AVI 
3. 数据 库 是 存储 在 一 起 的 相关 数据 的 
， 这 些 数 据 是 结构 化 的 ， 并 为 多 种 应 用 
服务 。 
A. 目录 
B. 表 
C. 记录 
D. 集合 
4. XHTML 是 由 语法 简化 而 成 的 ， 
因此 它 遵 循 XML 的 文档 规范 。 
A. HIML 
B. XML 
C. CSS 
D. W3C 
5. 常用 的 后 台 程 序 开发 语言 中 
主要 用 于 微软 公司 Windows 服务 器 系统 的 
ASPNET 后 台 程序 中 。 
A. ASP 
B. C# 
C. Java 
D. PHP 


三 、 简 答题 


.简单 介绍 W3C 的 产生 。 
.概述 W3C 的 组 成 。 

.简单 介绍 数据 库 的 概念 。 
.简单 介绍 网 页 的 构成 。 

.简单 介绍 XHTML 文档 的 创建 。 
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2.1 站 点 概述 
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Dreamweaver 站 点 可 以 组 织 和 管理 所 有 的 Web 文档 ， 并 将 本 地 站 点 上 传 到 Web 服务 器 ， 
用 以 跟踪 和 维护 站 点 链接 以 及 管理 和 共享 文件 。 

Dreamweaver 站 点 由 本 地 根 文件 夹 、 远 程 文件 夹 、 测 试 服务 器 文件 夹 3 部 分 组 成 ， 
其 具体 内 容 如 下 所 述 。 

1. 本 地 根 文件 夹 


本 地 根 文件 夹 又 称 为 “本 地 站 点 ”， 主 要 用 于 存储 正在 处 理 的 文件 , 通常 位 于 本 地 计 
算 机 上 ， 但 也 可 能 位 于 网 络 服务 器 上 。 


2. 远程 文件 夹 


远程 文件 夹 又 称 为 “远程 站 点 ” 主要 存储 用 于 测试 、 生 产 和 协作 等 用 途 的 文件 , 通 
常 位 于 运行 Web 服务 器 的 计算 机 上 ， 包 含 了 用 户 从 Intemet 中 访问 的 文件 。 通 过 远程 和 
本 地 文件 夹 ， 用 户 可 以 实现 本 地 硬盘 和 Web 服务 器 之 间 的 文件 传输 功能 ， 以 帮助 用 户 轻 
松 地 管理 Dreamweaver 站 点 中 的 文件 。 


3. 测试 服务 器 文件 夹 
测试 服务 器 文件 夹 是 Dreamweaver 用 来 处 理 动 态 页 的 文件 夹 。 


办 话 疡 障 蚁 节 到 刷 半 光 河 悦 
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创建 站 点 之 后 ， 用 户 还 需要 通过 指定 远程 文件 夹 来 链接 本 地 和 远程 站 点 。 而 在 远程 
文件 夹 ， 则 可 以 像 本 地 文件 夹 一 样 随意 命名 。 一 般 情况 下 ，Intemet 服务 提供 商 〈IJISP) 
通常 会 将 各 个 用 户 账户 的 顶级 远程 文件 夹 命 名 为 public_html、pub_html 或 者 与 此 类 似 的 
其 他 名 称 ， 当 用 户 不 满足 于 Intemet 服务 提供 商 所 命名 的 文件 夹 名 称 时 ， 则 可 以 像 本 地 
文件 夹 那 样 随意 命名 具有 标记 性 的 名 称 。 但 是 ， 为 了 区 分 和 传输 更 新 文件 来， 建议 用 户 
将 远程 文件 夹 的 名 称 命名 为 本 地 根 文件 夹 的 名 称 。 


ee re 


例如 ,图 2-1 中 的 左 侧 为 一 个 
本 地 根 文件 夹 , 而 右 侧 则 为 一 个 远 
程 文件 夹 。 其 中 ,本 地 计算 机 上 的 
本 地 根 文 件 夹 直接 映射 到 Web 服 
务 器 上 的 远程 文件 夹 , 而 不 是 映射 
到 远程 文件 夹 的 任何 子 文件 夹 或 
目录 结构 中 位 于 远程 文件 夹 之 上 
的 文件 夹 。 
当 用 户 需 要 在 本 地 计算 机 上 九 图 2-1 .站 点 结构 
维护 多 个 站 点 时 ， 其 远程 服务 器 上 则 需要 使 用 等 量 个 数 的 远程 文件 来 。 此 时 ， 图 2-1 便 
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不 再 适用 了 ,用户 应 该 在 public_html 文件 夹 中 再 创建 不 同 的 远程 文件 夹 ， 并 将 它们 映射 
到 本 地 计算 机 上 各 自 对 应 的 本 地 根 文件 夹 上 。 

另外 ， 远 程 文件 夹 应 始终 与 本 地 根 文件 夹具 有 相同 的 目录 结构 ， 当 两 者 的 目录 结构 
不 匹配 时 ， 其 Dreamweaver 则 会 将 文件 上 传 到 错误 的 位 置 ， 此 时 站 点 访问 者 可 能 无 法 查 
看 到 相 匹配 的 文件 。 

















2.2 ”安装 与 配置 IIS 服务 器 


在 建设 网 站 之 前 ， 大 多 数 设计 者 首先 应 调试 本 地 计算 机 ， 将 其 设置 为 服务 器 ， 使 本 














地 计算 机 可 以 对 外 发 布 网 页 ， 以 及 支持 各 种 动态 网 页 程序 。 这 就 需要 在 本 地 计算 机 中 安 
装 Web 发 布 服务 程序 ， 以 及 为 本 地 计算 机 设置 各 种 权限 。 


IIS (Internet Information Services， 互 联网 信息 服务 ) 是 微软 公司 开发 的 一 款 用 于 服 
务 器 对 外 发 布 网 站 的 软件 。 该 软件 可 以 实现 创建 网 站 、 配 制 和 管理 对 外 发 布 的 网 站 以 及 
实现 站 点 的 ASP 网 页 程序 的 支持 功能 。 下 面 将 以 Windows 10 系统 为 基础 ， 介 绍 安装 IS 
服务 器 的 操作 方法 。 
右 击 【开始 ] 按钮 ， 选择 【 控制 面板 ] 选项 ， 2-5 所 示 。 

打开 【控制 面板 】 窗口 ， 并 选择 【 程序 和 功 

能 】 选项， 如 图 2-2 所 示 。 






和 闻 忆 天国 》 程序 和 - Y [可 | 更 家 旺 床 -及 
拉 制 面板 主 页 


卸载 或 更 改 程序 





查看 已 安装 的 更 新 知 要 却 载 各 序 ， 请 从 列表 中 格 其 选 
个 国 ， 控 制 、， 所 有 控 -. v 总 | 搜索 过 制 。 记 © (asm ws me)] 中 ,然后 单 赴 " 知 吉 ” “生疏 "或 " 修 
复 . 


调整 计算 机 的 设置 [CE# ] ansx 大 男 标 ~ i re 
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吕 fs 间 图 2-3_ 【程序 和 功能 】 窗 口 
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2-2 【控制 面板 】 窗 口 启用 或 关闭 Windows 功能 © 





在 弹出 的 【 程序 和 功能 】 窗口 中 ,选择 左 侧 Nt ei E20 A 
的 【 启用 或 关闭 Windows 功能 】 选项， 如 
图 2-3 所 示 。 
在 弹出 的 【 Windows 功能 】 对 话 框 中 ， 展 
开 Internet Information Services 选项 , 并 启 
用 【 Web 管理 工具 】 选项 ,如 图 2-4 所 示 。 
继续 展开 【 Web 管理 工具 】 选 项 的 树 形 列 ds 
表 ， 启 用 【lIS 管理 服务 ]【 lIS 管理 脚本 和 
工具 】 和 【1IS 管理 控制 台 ] 3 个 项 目 , 如 图 | 上 了 图 2-4 。 添 加 Web 管理 工具 
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启用 【 万 维 网 服务 ] |【 性 能 功能 ] 选项 下 面 
启用 或 关闭 Windows 功能 @ pe 
Se 的 所 有 选项 ， 如 图 2-8 所 示 。 

框 。 填 充 的 框 表示 仅 启用 该 功能 的 一 部 分 。 

国 Ws Fede 4.6 高 级 服务 ~ 了 司 
人 启用 或 关闭 Windows 功能 e 

口 加 Intemet Ecplorer 11 
日 国 岂 Internet Information Services 
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口 司 Intermnet Information Services 可 承志 的 Web 核心 v 


















































确定 取消 | 
发 了 图 2-5 添加 IIS 管理 服务 口 eat nhormation Senicee 可 的 Web 可 人 
国 口 同 Microsoft Message Queue (MSMQ) 服务 器 二 
依次 展开 【 万 维 网 服务 ] |【 安全 性 】 选项 的 [ ww 
树 形 列 表 ， 启 用 【 请 求 筛选 】 选项 ， 如 图 
和 [请求 入 造 可 光 机 [了 图 2-8 .添加 性 能 功能 
2-6 所 示 。 
图 展开 [ 应 用 程序 开发 功能 } 选 项 的 树 形 列表 ， 
未 并 启用 除 CGI 和 【 服务 器 端 包 含 】 选 项 之 
帮 外 的 所 有 选项 ， 如 图 2-9 所 示 。 
[ws OO | 
S 有 启用 或 关闭 Windows 功能 © 
OR omg 
S Bm 
D DOD 站 | 天 qh SSL 
[= 埋 户 党 江 书 四 
版 
一 搂 要 式 身 份 验 证 
| 田 回 辣 贡 见 Hr _™| ASPJNET 3.5 
Ce | 7 ASP.NET 4.6 
和 图 2-6_, 添 加 安全 性 
加 使 用 同样 的 方式 ， 启 用 【 常见 HTTP 功能 】 
选项 及 其 下 面 的 所 有 选项 ， 如 图 2-7 所 示 。 




















和 图 2-9_。 添 加 应 用 程序 开发 功能 





图 展开 [ 运行 状况 和 诊断 】 选项 的 树 形 列表 ， 
启用 【HTTP 日 志 】【ODBC 日 志 记录 】 和 
【跟踪 】 选项 ， 如 图 2-10 所 示 。 

继续 展开 【 .NET Framework 3.5 ( 包含 .NET 
2.0 和 3.0 ) ] 选项 的 树 形 列表 ， 启 用 其 中 的 
所 有 选项 ， 如 图 2-11 所 示 。 

单 击 【 确定 】 按钮， 系统 开始 安装 IIS 服务 


[了 图 2-7 .添加 常见 HTTP 功能 器 ， 并 显示 安装 进度 条 ， 如 图 2-12 所 示 。 


















































启用 或 关闭 Windows 功能 © 
车 要 启用 一 种 功能 ， 请 选择 其 复 先 框 。 若 要 关闭 一 种 功能 ,请 清除 其 复 迁 
i 
WE | | 
L UK 图 2-12 .安装 IS 服务 器 





安装 完成 后 ， 用 户 通过 【 管理 工具 】 窗口 ， 
可 以 查看 【 Internet Information Services 
(lIS ) 管理 器 】 选 项 ， 表 示 已 经 安装 成 功 ， 
如 图 2-13 所 示 。 





田 回 | ,NET Framework 4.6 高 级 服务 


口 国 Active Directory 轻型 目录 服务 下 
田口 四 Hyper-V 
DO Internet Explorer 11 入 Internet Information Services (1S) 管 … 
日 国 ] Internet Information Services CT 
田口 国 FIP 服务 器 网 opec 数 撕 源 (32 位 
田 回 同 Web 管理 T 具 mm 
坝 opBc wa 二 (64 人 一 一 
日 国 国 万 最 务 网 Windows 内 邦交 新 
田 回 站 安全 性 珊 本 地 安全 第 略 
_ 国 回 司 利 见 HTTP 敬 > 
区 -于 
和 图 2-11 添加 .NET 功能 




















顾名思义 ， 虚 拟 目 录 并 非 实际 存在 的 目录 结构 。 每 个 Intemet 服务 都 可 以 从 多 个 目 
录 中 发 布 。 虚 拟 目 录 也 是 管理 网 站 中 文件 的 目录 。 安 装 好 IIS 服务 器 之 后 ， 可 以 建立 一 
个 目录 ， 并 将 其 设置 为 IIS 服务 器 的 虚拟 目录 。 

首先 ， 在 本 地 磁盘 中 创建 一 个 名 为 site 的 文件 夹 。 然 后 ， 右 击 桌面 中 的 【此 电脑 】 
图 标 ， 执 行 【 管 理 】 命 令 。 在 弹出 的 【计算 机 管理 】 窗 口中 ， 展 开 左 侧 【 服 务 和 应 用 程 
序 】 目 录 ， 选 择 Intermet Information Services 选项 。 同 时 ， 展 开 左 侧 第 2 列 中 的 目录 ， 右 
击 Default Web Site， 执 行 【 添 加 虚拟 目录 】 命 令 ， 如 图 2-14 所 示 。 

在 【添加 虚拟 目录 】 对 话 框 中 ， 在 【别名 】 文 本 框 中 输入 虚拟 目录 名 称 ， 并 在 【 物 
理 路 径 】 文 本 框 中 输入 或 选项 目录 路 径 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 图 2-15 所 示 。 
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安装 好 IIS 服务 后 ，Windows 系统 即 
可 支持 ASP 动态 网 页 交互 程序 。 但 如 果 
想 让 IIS 服务 以 及 ASP 程序 安全 、 稳 定 地 
运行 ， 还 需要 进行 一 系列 配置 。 例 如 ， 修 
改 IIS 的 Web 发 布 目 录 ， 以 及 开启 
Windows 防火 墙 对 外 发 布 权限 等 。 


1. 修改 IIS 发 布 目录 和 图 2-15 添加 虚拟 目录 


在 默认 情况 下 ，IIS 的 Web 发 布 目录 存放 于 Windows 的 “C:NImnetpubvwwwroot” 目 录 
中 。 为 保证 系统 盘 的 安全 性 ， 首 先 应 将 其 转移 到 其 他 磁盘 中 。 

右 击 桌面 中 的 【此 电脑 】 图 标 ， 执 行 【 管 理 】 命 令 。 在 弹出 的 【计算 机 管理 】 窗 口 
中 ， 展 开 左 侧 【服务 和 应 用 程序 】 目 录 ， 选 择 Internet Information Services 选项 。 同 时 ， 
展开 左 侧 第 2 列 中 的 目录 ， 右 击 Default Web Site, 执行 【管理 网 站 】|【 高 级 设置 】 命令， 
如 图 2-16 所 示 。 

然后 ， 在 弹出 的 【高 级 设置 】 对 话 框 中 ， 单 击 【 物 理 路 径 】 选 项 右 侧 的 【浏览 】 按 
钮 。 在 弹出 的 【浏览 文件 夹 】 对 话 框 中 ， 选 择 新 的 物理 路 径 ， 并 依次 单 击 【确定 】 按 钮 ， 
如 图 2-17 所 示 。 
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2-16_。【 计 算 机 管理 】 窗 口 2-17 _ 修 改 IIs 发 布 目录 


2. 设置 Windows 防火 墙 端口 


某 些 Windows 系统 为 了 保障 系统 安全 , 用 系统 内 置 的 防火 墙 关闭 了 所 有 可 能 发 生 危 
险 的 端口 , 其 中 包括 IS 服务 使 用 的 80 端口 。 为 使 Web 正常 发 布 , 还 需要 将 该 端口 打开 。 
右 击 【 开始] 图 标 , 执行 [ 控制 面板 命令， 
在 【控制 面板 】 窗口 中 选择 【Windows 防 | | < -个 办 “WwWpdo- vo sem 7 
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S Wind 也 
火 墙 】 选 项， 如 图 2-18 所 示 。 sm Re 
省 应 用 可 功能 通过 Windows 。 Windows 防火 顽 有 助 于 态 上 黑客 到 于 
Mn 全 软件 通辽 Internet 或 网 培 访 辣 你 的 
个 国 ， 控 制 ，， 所 有 控 -- v| 吕 | 省 索 尝 制 。 记 © wa 9 
国 让 用友 关闭 Windows Dk 
调整 计算 机 的 设置 查看 方式 ， 大 图 祭 ~ 9 Em 四 9 sam 
ED 0 道上 信任 的 用 户 和 设备 所 在 的 
yy 加 说 网 二 二 行 同和 和 革 etme 
RB windows Defender 选择 Windows 防火 二 训 用 昌 
具 windows 防火 二 在 图 2-19 选择 【高 级 设置 】 选 项 
人 安全 性 5 维护 站 安全 Windows 防火 二 
文件 报 作 (A】 查看 (V) 帮助 H) 
和 图 2-18 【控制 面板 】 窗 口 


在 【Windows 防火 墙 】 窗 口中， 选择 【高 
级 设置 ] 选项 ， 如 图 2-19 所 示 。 

在 弹出 的 【高 级 安全 Windows 防火 墙 ] 对 
话 框 中 ,选择 左 侧 的 【 入 站 规则 】 选 项 ,后 
时 选择 右 侧 的 [ 新 建 规则 ] 选 项 , 如 图 2-20 
所 示 。 























和 |_ 图 2-20 选择 规则 类 型 
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提 示 
Windows 10 中 | 出 站 规则 和 
的 设置 方法 一 样 ， 在 此 不 再 做 详细 介绍 。 









圆 在 弹出 的 【新建 入 站 规则 向 导 】 对 话 框 中 的 
【规则 类 型 】 选项 卡 中 ,选中 【 端口 ] 选项 ， 
并 单 击 【 下 一 步 】 按钮 ， 如 图 2-21 所 示 。 

















规则 类 型 
选择 要 创建 和 防火墙 规则 类 型 
步骤 : 
Re 要 和 刍 的 规 内 型 
协议 和 端口 -一 
“Dr 
“mt Gane) 
名 称 UP 端口 连 摘 的 规则 。 
口 预定 义 (): 
“ 捞 衣 到 设备 "功能 
控制 Windews 体验 功 f | 四 羊 击 ] 
〇 自 定义 (c) 
自 定义 规则 * 
esa] 取消 
和 图 2-21 新建 入 站 规则 





在 【协议 和 端口 】 选 项 卡 中 ， 选 中 TCP 和 
【 特定 本 地 端口 】 选项， 输入 本 地 端口 ， 并 
单 击 【 下 一 步 】 按钮， 如 图 2-22 所 示 。 





协议 和 端口 
指定 应 用 此 规则 的 协议 和 端口 。 
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名 和 此 规则 应 用 于 所 有 本 地 端口 还 是 特定 的 本 地 说 Y¥ 
吕 所 有 本 掺 溃 口 (A} 





[< 上 = 步 @) 取消 











和 | 图 2-22 ,设置 协议 和 端口 


加 在 【操作 】 选项 卡 中 ,选中 【人 允许 连接 】 选 
项 ， 并 单 击 【 下 一 步 】 按钮 ， 如 图 2-23 
所 示 。 

圆 在 [配置 文件 ] 选 项 卡 中 , 启用 所 有 复 选 框 ， 


并 单 击 【下 一 步 】 按钮 ， 如 图 2-24 所 示 。 








控 帮 
幸 定 在 坟 格 与 让 老 9j 生 件 相 FIE 雪 机 





课时 这 接 ， 以 及 让 使 用 Is 保 扩 的 连接 


RS 。。 口 只 多 前 安 全 连任 口 


i 


= 
口 阻止 连 阁 09 ¥ 
md 
和 图 2-23 设置 操作 条 件 














配置 文件 
指定 此 规 刚 应 用 的 际 置 文件 
上 加 
本 协议 和 山口 
二 (D) 
损 作 计算 机 连接 到 基 企业 :dB 应 用 。 
* 攀 轨 文件 





= 











和 图 2-24 ,设置 配置 文件 





图 在 【名称 】 选 项 卡 中 , 输入 规则 名 称 和 描述 
文本 ， 单 击 【 完成 ] 按钮 即 可 ， 如 图 2-25 





























所 示 。 
名 称 
指定 此 规 由 9 名 称 和 指 述 。 
步 和 - @ 输 入 
规 RI 关 型 CT 
协议 和 端口 site 
二 损 作 描述 (可 选 )D) 
各 配置 文件 和 eeb 对 外 发 布 
名 称 

= a0 | 38 

个 图 2-25 ,设置 名 称 和 描述 内 容 





2.3 创建 站 点 


了 解 了 Dreamweaver 站 点 之 后 ， 用 户 便 可 以 着 手 创建 站 点 了 ， 以 方便 用 户 在 设计 网 
页 时 随时 通过 Dreamweaver 调用 本 地 计算 机 的 Web 浏览 器 ， 浏 览 设计 效果 。 








在 Dreamweaver 中 ， 


执行 【站 点 了 民 新 建站 点 】 了 

命令 ， 缠 出 【站 点 设置 对 | 外 TD 
象 未 命名 站 点 2】 对 话 
框 ,。 激活 【站 点 】 选 项 卡 ， 
在 【站 点 名 称 】 文 本 框 中 
输入 站 点 名 称 ， 同 时 单 击 
【本 地 站 点 文件 夹 】 选 项 
es 【浏览 文件 夹 】 按 

1 ， 如 图 2-26 所 示 。 


和 图 2-26 ,设置 站 点 名 称 


这 4 E rs 只 会 显示 在 【文件 】 面 板 和 【管理 站 点 】 对 话 框 中 。| 


翰 久 小 
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然后 ， 在 弹出 的 【选择 根 文件 夹 】 对 话 框 中 ， 选 择 站 点 文件 夹 位 置 ， 并 单 击 【 选 择 


文件 夹 】 按 钮 ， 如 图 2-27 所 示 。 
最 后 ， 在 【站 点 设置 对 象 未 命名 
站 点 2】 对 话 框 中 ， 单 击 【 保 存 】 按 钮 









在 【站 点 设置 对 象 未 命名 站 点 2】 
对 话 框 中 ， 激 活 【服务 器 】 选 项 卡 。 在 
该 选项 卡 中 ， 主 要 用 于 指定 远程 服务 器 
和 测试 服务 器 。 默 认 情况 下 ， 该 选项 卡 
中 不 存在 服务 器 设置 ， 用 户 需要 单 击 列 
表 框 下 方 的 模 按 钮 ， 来 添加 服务 器 ， 如 ”人 图 2-27。 选 择 根 文件 夹 
图 2-28 所 示 。 

然后 ， 用 户 可 在 弹出 的 对 话 框 中 设置 服务 器 的 【基本 】 和 【高 级 】 选 项 。 


1. FTP 连接 下 的 【基本 】 选 项 卡 
在 弹出 的 对 话 框 中 ， 激 活 【 基 本 】 选 项 卡 ， 将 【连接 方法 】 选 项 设置 为 FTP， 并 

















设置 相应 选项 ， 如 图 2-29 

所 示 。 

其 中 ， 在 默认 连接 方 的 来 

法 为 FTP 状态 下 ,【 基 本 】 | 

选项 卡 中 各 选项 的 具体 含 

义 ， 如 下 所 述 。 

口 服务 器 名 称 ”用 于 
指定 服务 器 的 名 称 。 

口 连接 方法 “用 于 设 
置 服务 器 的 连接 方 
ee 人 
SSL/TLS ( 隐 式 加 密 )、FTP 






























































over SSL/TLS ( 显 式 加 密 )、 到 人 
本 地 /网 络 `.WebDAV 和 RDS ia: [EEC 
等 选项 。 Fr ott: ] Wo [2 
口 FTP 地 址 用 于 输入 FTP gE! 
服务 器 的 地 址 , 其 FTP 地 址 = 
是 计算 机 系统 完整 的 二 
S Internet 名 称 ; 其 右 侧 的 【 端 Web URL: [Pep 
® 口 ] 是 FTP 连接 的 默认 端口 中 
S “21?。 加 合用 被 动 式 FIP 
局 口 用 户 名 用 于 设置 连接 FTP | 国有 下 和 
和 所 需 使 用 的 用 户 名 。 回合 用 FTP 性 能 优化 
口 密码 ”用 于 设置 连接 FTP ide 
所 需 使 用 的 密码 ， 当 禁用 | ea [Ee | | 





【保存 】 复 选 框 时 ， 在 每 次 
连接 远程 服务 器 时 ， 系 统 都 万 图 2-29 。FTP 连接 方法 
会 提示 输入 密码 。 
测试 ” 单 击 该 按钮 ， 可 以 测试 所 设置 的 FTP 地 址 、 用 户 名 和 密码 。 
根 目录 用 于 输入 远程 服务 器 上 用 于 存储 公开 显示 的 文档 的 目录 (文件 夹 )。 
Web URL 用 于 输入 Web 站 点 的 URL。 
使 用 被 动 式 FTP ”启用 该 复 选 框 ， 可 以 使 本 地 软件 建立 FTP 连接 ， 而 非 请 求 远 
程 服务 器 来 建立 FTP 连接 。 
口 使 用 IPv6 传输 模式 ”启用 该 复 选 框 ， 可 以 启用 支持 IPv6 的 FTP 服务 器 。 
口 使 用 以 下 位 置 中 定义 的 代理 ”启用 该 复 选 框 ， 可 以 使 用 【首选 项 】 对 话 框 中 所 设 
置 的 代理 主机 或 代理 端口 。 
口 使 用 FTP 性 能 优化 ”启用 该 复 选 框 ， 可 以 对 所 连接 的 FTP 服务 器 的 性 能 进行 优 
化 操作 。 





画 是 本 攻 杏 蜂 囊 








口 使 用 其 他 的 FTP 移动 方法 ”启用 该 复 选 框 ， 可 以 使 用 其 他 FTP 中 移动 文件 的 


2. SFTP 连接 下 的 【基本 】 选 项 卡 


SFTP 使 用 加 密 密 钥 和 标识 密 钥 
来 保证 指向 远程 服务 器 连接 的 安全 。 
当 服 务 器 或 防火 墙 的 配置 要 求 使 用 安 
全 的 FTP 时 ， 则 需要 将 【连接 方法 】 
选项 设置 为 SFTP， 并 设置 相应 选项 ， 
如 图 2-30 所 示 。 
在 该 连接 方法 中 ， 其 设置 选项 类 
似 于 FTP 连接 方法 ,但 多 出 一 个 【 验 
证 】 选 项 。 在 【验证 】 选 项 中 又 分 为 
下 列 两 种 验证 方法 。 
口 用 户 名 和 密码 ”该 方法 适合 
在 没有 密 钥 的 情况 下 使 用 , 其 
验证 方式 类 似 于 FTP 连接 方 《了 图 2-30 .SFTP 连接 方法 
式 ， 主 要 通过 用 户 名 和 密码 
进行 。 

口 私 钥 文件 ”该 方法 适合 使 用 用 户 名 和 身份 文件 组 合 验 证 , 选中 该 选项 之 后 ， 系统 
将 自动 显示 【用 户 名 【标识 文件 〗 和 【密码 】3 个 选项 ， 输 入 相应 内 容 之 后 
即 可 。 


3. 本 地 /网 络 连接 下 的 【基本 】 选 项 卡 


当 用 户 需 要 运行 测试 服务 器 
或 在 本 地 计算 机 或 连接 到 的 网 络 
文件 夹 上 存储 文件 时 ， 则 需要 将 
【连接 方法 】 选 项 设置 为 【本 地 / 
网 络 】 并 设置 相应 选项 , 如 图 2-31 
所 示 。 

在 该 连接 方法 下 , 主要 包括 下 
列 3 个 选项 。 

口 服务 器 名 称 用 于 设置 服 pe < 

务 器 的 名 称 . 和 图 2-31_。 本 地 /网 络 连接 方法 

口 服务 器 文件 夹 ” 用 于 设置 存储 站 点 文件 的 文件 夹 。 

口 Web URL 用 于 输入 Web 站 点 的 URL. 


4. RDS 连接 下 的 【基本 】 选 项 卡 
当 用 户 需 要 使 用 远程 开发 服务 (RDS) 连接 到 Web 服务 器 时 ， 则 需要 使 用 RDS 连 
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接 方法 。 在 对 话 框 中 , 将 【连接 方法 】 选 项 设置 为 RDS, 并 单 击 【 设 置 】 按 钮 ， 如 图 2-32 
所 示 。 

然后 ， 在 弹出 的 【配置 RDS 服务 器 】 对 话 框 中 ,设置 配 置 选 项 ， 单 击 【 确 定 】 按 钮 
即 可 ， 如 图 2-33 所 示 。 


















































和 | 图 2-32_,RDS 连接 方法 和 图 2-33 配置 RDS 服务 器 


在 【配置 RDS 服务 器 】 对 话 框 中 ， 主 要 包括 下 列 几 个 选项 。 

口 主机 名 用 于 设置 安装 Web 服务 器 的 主机 名 称 。 

口 端口 用 于 设置 连接 的 端口 号 。 

口 完整 的 主机 目录 用 于 设置 作为 主机 目录 的 远程 文件 夹 。 

口 用 户 名 和 密码 ”用 于 设置 RDS 的 用 户 名 和 和 密码， 启用 【保存 】〗】 复 选 框 则 可 以 使 
系统 记 住 用 户 名 和 密码 。 


rr aasawsai| 


5. 设置 【高 级 】 选 项 卡 


在 对 话 框 中 激活 【高 级 】 选 项 卡 ， 该 选项 
卡 中 的 内 容 不 会 随 着 【连接 方式 】 选 项 的 改变 
而 改变 ， 它 的 选项 是 固定 不 变 的 ， 如 图 2-34 
所 示 。 

在 【高 级 】 选 项 卡 中 ， 主 要 包括 下 列 几 个 








选项 





口 维护 同步 信息 启用 该 复 选 框 ,可 以 自 
动 同步 本 地 和 远程 文件 。 人 了 图 2-34 。【 高 级 】 选项 卡 

口 保存 时 自动 将 文件 上 传 到 服务 器 ”启用 该 复 选 框 ， 在 保存 文件 时 Dreamweaver 
会 自动 将 文件 上 传 到 远程 站 点 。 

口 启用 文件 取出 功能 ”启用 该 复 选 框 ， 可 以 激活 “ 存 回 /取出 ”系统 ， 同 时 激活 【 打 
开 文 件 之 前 取出 【取出 名 称 】〗】 和 【电子 邮件 地 址 】〗 选 项 。 

口 服务 器 模型 ”用 于 设置 测试 服务 器 类 型 ， 包括 JSP、PHP MySQL、ASP VBScript 
等 8 种 类 型 。 





在 【站 点 设置 对 象 未 命名 站 点 2】 对 话 框 中 ， 激 活 【 版 本 控制 】 选 项 卡 。 在 该 选项 
卡 中 ， 主 要 用 于 设置 Subversion 访问 类 型 下 获取 和 存 回 文件 选项 。 

在 该 选项 卡 中 ， 单 击 【 访 问 】 下 拉 按钮 ， 在 其 列表 中 只 有 Subversion 一 种 选项 ， 该 
选项 可 以 协作 用 户 编辑 和 管理 Web 
服务 器 中 的 文件 ， 如 图 2-35 所 示 。 

除了 【访问 】 选 项 之 外 ,【 版 
本 控制 】 选 项 卡 还 包括 下 列 几 种 
选项 。 

口 协议 用 于 设置 Subversion 
协议 类 型 ， 包括 HTTP、 
HTTPS、 SVN、SVN+SSH 
类 型 。 

口 服务 器 地 址 用 于 设置 
Subversion 服务 器 地 址 ， 其 
表现 形式 为 “服务 器 名 称 . 
域 .com”。 和 图 2-35 ,设置 版 本 控制 选项 

D 存储 库 路 径 用 于 设置 
Subversion 服务 器 存储 库 的 路 径 。 
口 服务 器 端口 ”用 于 设置 Subversion 服务 器 的 端口 号 。 
口 用 户 名 用 于 输入 Subversion 服务 器 的 用 户 名 。 
口 密码 用 于 输入 Subversion 服务 器 的 密码 。 
口 测试 ”用 于 测试 与 Subversion 服务 器 的 连接 状态 。 
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在 【站 点 设置 对 象 未 命名 站 点 2】 对 话 框 中 ， 激 活 【高 级 设置 】 选 项 卡 。 在 该 选项 
卡 中 ， 主 要 包括 【本 地 信息 、 【遮盖 】、【 设 计 备注 】、【 文 件 视图 列 】 等 9 种 选项 组 。 


1. 本 地 信息 


在 【高 级 设置 】 选 项 卡 中 ， 选 择 【本 地 信息 】 选 项 组 ， 在 右 侧 展开 的 列表 中 设置 各 
项 选项 ， 如 图 2-36 所 示 。 
在 【本 地 信息 】 选 项 组 中 ， 主 要 包括 下 列 一 些 选 项 。 
口 默认 图 像 文 件 夹 ” 用 于 设置 存储 站 点 图 像 的 文件 夹 , 用 户 既 可 以 直接 输入 文件 来 
地 址 ， 又 可 以 通过 单 击 右 侧 的 【浏览 文件 夹 〗】 按 钮 来 选择 文件 夹 。 
口 链接 相对 于 ”用 于 在 站 点 中 创建 指向 其 他 资源 或 页 面 的 链接 类 型 ， 包 括 【 文 档 】 
和 【站 点 根 目 录 】〗 两 种 类 型 。 
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D Web URL 用 于 设置 Web 站 点 的 URL.。 

口 区 分 大 小 写 的 链接 
检查 ”启用 该 复 选 
框 , 当 Dreamweaver 
检查 链接 时 ， 将 会 
检查 链接 与 文件 名 
大 小 写 的 匹配 性 。 
该 选项 一 般 用 于 文 
件 名 区 分 大 小 写 的 
UNIX 系统 。 

口 启用 缓存 启用 该 

复 选 框 ， 可 以 指定 

创建 本 地 缓存 以 提 ”了 图 2-36 ,设置 本 地 信息 

高 链接 和 站 点 管理 

任务 的 速度 。 如 禁用 该 复 选 框 ， 系统 则 会 在 创建 站 点 前 弹出 提示 框 ， 以 询问 用 户 

是 否 创 建 缓存 。 


2. 遮盖 


使 用 站 点 遮盖 功能 ， 既 
可 以 从 “获取 ”或 “上 传 ” 
等 操作 中 排除 某 些 文件 和 文 
件 夹 ， 又 可 以 从 站 点 操作 中 
遮盖 特定 类 型 的 文件 ， 例 如 
JPEG、FLV、XML 文件 等 。 
在 【高 级 设置 】 选 项 卡 中 ， 
选择 【遮盖 】 选 项 组 ， 在 右 
侧 展开 的 列表 中 启用 或 禁用 
遮盖 功能 ， 如 图 2-37 所 示 。 生 图 2-37 .设置 这 羡 

在 该 选项 组 中 ， 主 要 包括 下 列 两 个 选项 。 
口 启用 遮盖 ”启用 该 复 选 框 ， 即 可 启用 文件 遮盖 功能 。 
口 遮盖 具有 以 下 扩展 名 的 文件 ”启用 该 复 选 框 , 可 以 在 其 下 方 的 文本 框 中 指定 所 需 


ar en ts annnanomapaas, | 


3. 设计 备注 


设计 备注 是 用 户 为 文件 创建 的 备注 ， 一 般 存 储 在 单独 的 文件 中 ， 并 与 所 描述 的 文件 
相关 联 。 在 【高 级 设置 】 选 项 卡 中 ， 选 择 【 设 计 备注 】 选 项 组 ， 在 右 侧 展开 的 列表 中 设 
置 相关 选项 即 可 ， 如 图 2-38 所 示 。 

















在 【设计 备注 】 选 项 卡 中 ， 
包含 了 下 列 3 种 选项 。 

口 维护 设计 备注 ”启用 该 
选项 ， 可 启用 设计 备注 
功能 。 

口 清理 设计 备注 单 击 该 
按钮 ， 在 弹出 的 提示 对 











话 框 中 单 击 【是 了 按钮 ， 
即 可 删除 站 点 的 所 有 本 i 
地 设计 备注 文件 。 人 《了 图 2-38 .设置 设计 备注 


口 启用 上 传 并 共享 设计 备注 “启用 该 选项 时 ， 在 上 传 或 获取 某 个 文件 时 ， 系 统 会 自 
动 上 传 或 获取 关联 的 设计 备注 文件 ， 以 方便 用 户 和 小 组 成 员 共 享 设计 备注 。 


4. 文件 视图 列 


在 【高 级 设置 】 选 项 卡 中 ， 选 择 【 文 件 视图 列 】 选 项 组 ， 在 右 侧 展开 的 列表 中 显示 
了 文件 和 文件 夹 信 息 ， 如 图 2-39 所 示 。 








和 图 2-39 ,设置 文件 视图 列 


其 列表 框 中 各 信息 的 具体 描述 内 容 ， 如 下 所 述 。 

口 名 称 ”用 于 显示 文件 名 称 .。 

口 备注 用 于 显示 设计 备注 。 

口 大 小 ”用 于 显示 文件 大 小 。 

口 类 型 ”用 于 显示 文件 类 型 。 

口 修改 ”用 于 显示 修改 时 间 。 

口 取出 者 ”用 于 显示 文件 被 打开 和 阅读 的 用 户 名 称 .。 
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而 在 列表 框 下 方 ， 则 为 用 户 提供 了 编辑 文件 视图 信息 的 操作 按钮 和 选项 ， 其 具体 含 
义 和 作 用 如 下 所 述 : 
口 添加 新 列 单 击 【添加 新 列 】 按 包 国 ， 可 在 弹出 的 对 话 框 中 设置 所 添加 的 新 列 
信息 。 
口 删除 列 单 击 【删除 列 】 按 钮 眉 ， 可 删除 列表 框 中 所 选 列 。 
口 编辑 现 有 列 “ 单 击 【 编 辑 现 有 列 了 按钮 四, 可 在 弹出 的 对 话 框 中 编辑 现 有 列 选项 。 
口 调整 顺序 用 户 可 通过 单 击 【 在 列表 中 上 移 项 】 按 钮 和 【在 列表 中 下 移 项 】 按 
钮 可， 来 调整 列 信息 的 显示 位 置 。 
口 启用 列 共 享 ”启用 该 复 选 框 ， 可 以 

































































启用 列 关 垃 。 [ee 
另外 ， 当 用 户 单 击 【 添 加 新 列 】 按 钮 | SHE _ 辕 
后 , 在 弹出 的 对 话 框 中 , 可 设置 【 列 名 称 、 zf == FE 
【与 设计 备注 关联 【对 齐 】 等 选项 ， 如 图 rd 
2-40 所 示 。 
在 弹出 的 对 话 框 中 ， 主 要 包括 下 列 4 | 全 十 











个 选项 : 


口 列 名 称 用 于 输入 新 列 的 名 称 。 在 了 图 2-40 添加 新 列 

口 与 设计 备注 关联 用 于 设置 需要 与 设计 备注 所 关联 的 值 或 选项 ， 包 括 【 状 态 】 
【已 分 配 】【 到 期 【优先 级 〗4 个 选项 。 

口 对 齐 ”用 于 设置 文本 的 对 齐 方式 ， 包 括 【 左 】、【 右 】〗 和 【居中 】3 个 选项 。 

口 选项 启用 【显示 】〗 复 选 框 ， 可 显示 列 ， 否 则 将 隐藏 列 ; 启用 【与 该 站 点 所 有 用 
户 共 享 】 复 选 框 ， 可 与 连接 到 该 远程 站 点 的 所 有 用 户 共 享 该 列 。 








Dreamweaver 内 置 了 站 点 管理 功能 ， 用 户 可 以 通过 编辑 站 点 、 导 入 和 导出 站 点 设置 、 
测试 站 点 等 一 系列 操作 ， 对 静态 和 动态 站 点 进行 管理 。 








编辑 站 点 是 对 所 创建 的 站 点 进行 修 
改 、 切 换 、 复 制 、 删 除 等 一 系列 的 操作 ， 
使 站 点 更 符合 网 页 制作 所 需 。 


1. 编辑 站 点 信息 


























执行 【站 点 】| 【管理 站 点 】 命令, 在 [到 | 
弹出 的 【管理 站 点 】 对 话 框 中 ， 选 中 需要 = 
编辑 的 站 点 ， 并 单 击 【编辑 当前 选 定 的 站 和 图 2-41 选择 站 点 
点 】 按 钮 ， 如 图 2-41 所 示 。 


Coast #4 tn ee wssaanaataenss | 


然后 ， 在 弹出 的 【站 点 设 
置 对 象 未 命名 站 点 2】 对 话 框 
中 修改 站 点 信息 ， 单 击 【 保 存 】 
按钮 即 可 ， 如 图 2-42 所 示 。 


2. 切换 站 点 


当 用 户 创建 多 个 站 点 之 
后 ， 可 在 【管理 站 点 】 对 话 杠 
中 的 【您 的 站 点 】 列 表 框 中 选 
择 所 需 切换 的 站 点 名 称 ， 单 击 人 了 卫生 人 生生 
【完成 】 按钮 ， 即 可 切换 到 所 选 站 点 中 ， 如 图 2-43 所 示 。 


3. 复制 站 点 


当 用 户 需 要 创建 一 个 与 当前 站 点 设置 基本 相同 的 新 站 点 时 ， 则 需要 使 用 “复制 ” 功 
能 进行 创建 。 

首先 ， 在 【管理 站 点 】 对 话 框 中 的 【您 的 站 点 】 列 表 框 中 选择 所 需 复制 的 站 点 ， 并 
单 击 【 复 制 当 前 选 定 站 点 】 按 钮 ， 此 时 在 所 选 站 点 下 方 将 出 现 所 复制 的 站 点 ， 如 图 2-44 
所 示 。 


























& 了 图 2-43 ,切换 站 点 故 y 图 2-44 ,复制 站 点 
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然后 ， 单 击 【编辑 当前 选 定 的 站 点 】 按 钮 ， 在 弹出 的 【站 点 设置 对 象 动漫 设计 复 
制 】 对 话 框 中 修改 站 点 信息 ， 单 击 【保存 】 按 钮 即 可 ， 如 图 2-45 所 示 。 





点 是 网 站 中 使 用 的 所 有 文件 和 资源 的 集合 。 
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全 可 以 在 比 外 为 DE 
































Dreamweaver 为 用 户 提供 了 导出 和 导入 站 点 设置 功能 ， 以 方便 用 户 在 多 台 计 算 机 中 
进行 同一 网 站 的 开发 。 


1， 导 出 站 点 设置 


执行 【站 点 】I 【管理 站 
站 点 ， 单 击 【 导 出 5 前 选 定 的 站 点 】 按 角 ， 加 图 2- 46 所 示 。 








此 时 ,系统 会 自动 弹出 【导出 站 点 】 对 话 框 , 在 该 对 话 框 中 设置 保存 位 置 , 单 击 【 保 
存 】 按 钮 ， 即 可 将 站 点 设置 保存 为 带 有 .ste 扩展 名 的 XML 文件 格式 ， 如 图 2-47 所 示 。 
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& 了 图 2-46 选择 站 点 和 图 2-47 选择 保存 位 置 


2. 导入 站 点 设置 


执行 【站 点 】I 【管理 站 点 】 命 令 , 在 弹出 的 【管理 站 点 】 对 话 框 中 单 击 【 导 入 站 点 】 
按钮 ， 如 图 2-48 所 示 。 

在 弹出 的 【导入 站 点 】 对 话 杠 中， 选择 需要 导入 的 备份 文件 ， 并 单 击 【 打 开 】 按 钮 
即 可 ， 如 图 2-49 所 示 。 
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创建 站 点 之 后 ， 用户 可 对 工作 流程 或 HTML 属性 运行 站 点 报告 , 来 检查 站 点 中 的 链 
接 ， 以 改进 Web 小 组 各 成 员 之 间 的 协作 问题 。 在 进行 站 点 报告 之 前 ， 用 户 还 需要 设置 一 
个 测试 服务 器 ， 并 需要 指定 一 个 Web URL 才 可 以 显示 网 站 数据 并 链接 到 数据 库 。 


1. 测试 服务 器 概述 


一 般 情 况 下 ， 测 试 服务 器 的 Web URL 是 由 域名 和 网 站 主 目录 的 任意 子 目 录 或 虚拟 
目录 组 成 。 其 中 ， 主 目录 是 服务 器 上 映射 到 用 户 的 站 点 域名 的 文件 夹 。 例 如 ， 在 此 定义 
主 目录 的 文件 夹 地 址 为 di\sites\company， 其 Web URL 的 前 级 为 http://www.mystartup.com/。 


Carnanakssauaszoaanaa snnnneans rs wate] 


但 是 ， 当 用 来 处 理 动 态 网 页 的 文件 夹 是 主 目录 中 的 子 文件 夹 ， 则 需要 将 该 文件 夹 添 
加 到 URL 中 。 例如 , 主 目录 为 d:\sites\company，, 而 动态 网 页 的 文件 夹 为 di\sites\company\ 
inventory， 则 Web URL 变 为 http://www.mystartup.com/inventory/。 

当 用 户 所 用 来 处 理 动态 网 页 的 文件 夹 不 是 主 目录 或 任何 子 目 录 ， 则 需要 创建 虚拟 目 
录 ， 而 虚拟 目录 实际 上 并 不 包含 在 服务 器 主 目录 中 的 文件 夹 中 。 

另外 , Dreamweaver 还 允许 客户 端 与 Web 服务 器 运行 在 同一 Windows 系统 中 。 此 时 ， 
如 果 主 目录 为 ci\sites\company， 并 且 将 虚拟 目录 文件 夹 定义 为 warehouse， 则 所 需 为 
Web 服务 器 输入 的 Web URL 地 址 根据 不 同 的 服务 器 类 型 而 不 同 ， 其 具体 情况 如 表 2-1 
所 示 。 
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3 表 2-1 ,Web 服务 器 与 相关 地 址 


Web 服务 器 
ColdFusion MX 7 











http://localhost:8500/warehouse/ 
http://localhost/warehouse/ 
http://localhost:80/warehouse/ 
http://localhost:8080/warehouse/ 






Apache 





2. 设置 服务 器 概述 


执行 【站 点 】| 【管理 站 点 】 命 令 ， 
在 弹出 的 【管理 站 点 】 对 话 框 中 选择 站 
点 名 称 ， 单 击 【 编 辑 当前 选 定 的 站 点 】 
按钮 ， 如 图 2-50 所 示 。 

然后 ， 在 弹出 的 【站 点 设置 对 象 动 
漫 设计 】 对 话 框 中 激活 【服务 器 】 选 项 
改 ， 并 单 击 【添加 新 服务 器 】 按 钮 ， 如 
图 2-51 所 示 。 

在 弹出 的 对 话 框 中 ， 将 【连接 方法 】 
设置 为 【本 地 /网 络 】 分 别 设置 【服务 器 
文件 夹 】 和 Web URL 选项 ， 并 单 击 【保存 】 按 钮 即 可 ， 如 图 2-52 所 示 。 





























[| 图 2-50 选择 服务 器 
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保存 时 自动 推送 
在 Dreamweaver 中 保存 的 任何 文件 将 被 自动 惟 送 到 上 方 列 北江 皮 服务器。 
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和 7 图 2-51 ,添加 新 服务 器 [了 图 2-52 ,设置 服务 器 信息 








3. 使 用 报告 测试 站 点 


在 Dreamweaver 中 ,可 以 通过 “报告 ”对 
工作 流程 或 HTML 属性 运行 站 点 报告 ， 以 检 
查 站 点 中 的 链接 ,以 及 检查 可 合并 的 撕 套 字体 
标签 、 遗 漏 的 替换 文件 、 多 余 的 嵌 套 标签 、 可 
删除 的 空 标签 和 无 标题 文档 等 内 容 。 

执行 【站 点 】I【 报 告 ] 命 令 , 在 弹出 的 【 报 
告 】 对 话 框 中 选择 报告 类 型 ， 单 击 【 运 行 】 按 
钮 创建 报告 ， 如 图 2-53 所 示 。 
此 时 ， 在 弹出 的 【站 点 报告 】 面 板 中 ， 将 和 图 2-53 ,设置 报告 
































显示 报告 运行 的 文件 名 称 、 描 述 内 容 等 
报告 结果 ， 如 图 2-54 所 示 。 

单 击 左 侧 的 【保存 报告 】 按 钮 ， 在 
弹出 的 【另存 为 】 对 话 框 中 ， 设 置 保存 
位 置 ， 单 击 【 保 存 】 按 钮 即 可 保存 报告 

pe 
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& 图 2-54 ,显示 报告 结果 


贞 点 





每 一 个 网 站 都 需要 有 自己 的 站 点 ， 


放 在 一 起 。 因 此 ， 本 地 站 点 在 创建 网 站 时 是 非常 重要 的 ， 也 是 不 可 缺少 的 操作 步骤 。 在 

本 练习 中 ， 将 详细 介绍 使 用 Dreamweaver 创建 本 站 点 的 操作 方法 。 
操作 步骤 : 

启动 Dreamweaver， 执 行 【站 点 ] |【 新 建 
站 点 】 命令 ,如 图 2-55 所 示 ， 弹 出 【站 点 
设置 对 象 ] 对 话 框 。 
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位 图 2-55 ,新 建站 点 











在 【站 点 名 称 】 文本 框 中 输入 站 点 名 称 ， 
时 单 击 【 本 地 站 点 文件 夹 】 选项 右 侧 的 【 浏 
览 文件 夹 】 按钮 ， 如 图 2-56 所 示 。 














和 图 2-56 ,设置 站 点 名 称 


它 就 像 一 个 空间 一 样 ， 需 要 将 网 站 相关 的 内 容 存 

















第 
py 
章 
在 弹出 的 【选择 根 文件 夹 】 对 话 框 中 ,选择 创 
保存 位 置 ， 单 击 【 选择 文件 夹 ] 按钮 ， 如 图 建 
2-57 所 示 。 
站 
点 
< ~ 个 (DJ ，sies v 已 搜索 "sites* 记 
加 选择 
A Ee 
has 
各 本 地 磁盘 (C) 
一 本 地 码 盘 (D;) 
吉本 地 三 盘 (E) 、 
文件 实 : | 站 点 设计 
门 妥 :天 取消 





& 了 图 2-57 选择 根 文件 





激活 左 侧 的 【 服务 器 ] 选项 卡 ， 单 击 【 添加 
新 服务 器 】 按钮 ， 如 图 2-58 所 示 。 

















〖K 了 了 图 2-58 【服务 器 】 选 项 卡 
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在 弹出 的 对 话 框 中 ， 设 置 服务 器 名 称 、FTP VBScript 选项 ， 单 击 【 保存 】 按钮 ， 如 图 
地 址 、 用 户 名 和 密码 ， 如 图 2-59 所 示 。 2-60 所 示 。 





和 图 2-59 设置 服务 器 


激活 【高 级 ] 选项 卡 ， 单 击 【 服务 器 模型 】 
下 拉 按钮 ， 在 其 下 拉 列 表 中 选择 ASP | 人 7 图 2-60 .设置 服务 器 模型 








创建 一 个 单独 的 网 页 ， 非 常 简单 ， 只 需 创 建 相应 的 文档 输入 相对 应 的 文本 即 可 。 当 
然 ， 如 果 所 创建 的 网 页 属于 某 个 网 站 中 的 单一 网 页 ， 则 需要 将 网 页 保存 到 所 创建 的 网 站 
文件 夹 位 置 中 。 在 本 练习 中 , 将 通过 创建 一 个 “送别 诗 ” 页 面 , 来 详细 介绍 在 Dreamweaver 
中 创建 简单 网 页 的 方法 ， 如 图 2-61 所 示 。 
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2-61 。“ 送 别 诗 ” 网 页 





操作 步骤 : 

执行 【文件 】 |【 新 建 ] 命令, 打开 【新 建文 属性 】 按钮， 如 图 2-63 所 示 。 
档 】 对 话 框 ， 在 【 文档 类 型 ] 列表 框 中 选择 在 弹出 的 【 页面 属性 】 对 话 框 中 的 【 外观 
HTML 选项 , 创建 一 个 空白 页 面 , 如 图 2-62 ( CSS ) ] 选项 卡 中 ,设置 页 面 文本 大 小 、 文 
所 示 。 本 颜色 和 背景 颜色 ， 如 图 2-64 所 示 。 


在 页 面 下 方 的 【 属性 】 面板 中 ， 单 击 【 页面 
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在 【设计 ] 视 图 中 , 输入 “ 送 孟 浩然 之 广陵 ” 
诗词 内 容 ， 如 图 2-66 所 示 。 

十 人 
李白 

故人 西戎 黄 准 楼 ， 烟 花 三 月 下 扬州 。 
所 下 W 远 果 身 空 尽 ， 唯 风 长 江天 际 流 。 
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和 图 2-66 输入 诗词 内 容 


加 在 【属性 】 面板 中 ,激活 CSS 选项 卡 , 单 
击 【 居中 对 齐 】 按钮 ， 设 置 对 齐 格式 , 如 图 
2-67 所 示 。 








《 送 孟 浩然 之 厂 陵 》 







































































上 李白 
故人 西 群 黄 欠 模 ， 烟花 三 月 下 扬州。 
国 扳机 远 影 呈 空 尽 ， 唯 风 长 江天 际 流 。 
分 类 hm (ss) 
JS 页 面体 全 E 
| ES 大 hg 人 
和 tm 国 
背 果 颜色 (2) E 
衫 果 图 委 () 
el 和 图 2-67 ,设置 对 齐 格式 
万 m:[ a 
tv: I "wo 执行 [文件]】1[ 保存 ] 命令, 在 弹出 的 【 另 
Ex | [区 存 为 】 对 话 框 中 , 设置 保存 名 称 ， 单 击 【 保 


和 图 2-64 ,设置 外 观 (CSS) 


激活 左 侧 【 标题 /编码 】 选 项 卡 ， 在 【 标题 】 
文本 框 中 输入 页 面 标题 ， 并 单 击 【 确定 ] 按 
钮 ， 如 图 2-65 所 示 。 
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文件 文件 夫 : 
站 点 文件 夫 : D: Vsites\ 











帮助 他 [ 秦 取消 ”| | 应 用 多) 


和 图 2-65 设置 标题 














存 】 按钮 ， 如 图 2-68 所 示 。 


个 间 « 本 地 区 盘 (D) sites v 已 | 省 索 "sites" 万 

组 织 ” 新 建文 件 夫 上 胜 ~ © 
小 音乐 网 站 点 设计 
尖 本 地 正和 (C) 国 comecss 











保存 类 型 (): All Documents (htm;*.htmb;*.shtm",shtmb*.xhtml; ~ 


[OO 十 ] 


| 站 点 根 目录 保存 (S) 取消 | 











入 隐藏 文件 夫 








和 图 2-68 保存 文档 


图 按 下 F12 键 , 在 弹出 的 浏览 器 中 查看 最 终 效 
果 ， 如 图 2-69 所 示 。 
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和 图 2-69 ,查看 最 终 效果 








一 、 填 空 题 


1. Dreamweaver 中 的 本 地 站 点 为 一 个 
， 车 要 向 Web 服务 器 传输 文件 或 开发 

Web 应 用 程序 ， 则 必须 添加 远程 站 点 和 测试 服务 
器 信息 。 

2. Dreamweaver 站 点 由 本 地 根 文件 夹 、 
~  、 测 试 服务 器 文件 夹 3 部 分 组 成 。 

3， Internet 服务 提供 商 〈ISP) 通常 会 将 各 
个 用 户 账户 的 项 级 远程 文件 夹 命名 为 
pub_html 或 者 与 此 类 似 的 其 他 名 称 。 

4. IIS (Internet Information Services， 互 联 
网 信息 服务 ) 软 件 可 以 实现 ” 、 配 制 和 
管理 对 外 发 布 的 网 站 以 及 实现 站 点 的 ASP 网 页 
程序 的 支持 功能 。 

5. 将 网 页 直接 复制 到 
接 通过 正 浏览 器 访问 该 网 页 。 

二 、 选 择 题 





中 , 即 可 直 





1. SFTP 使 用 加 密 密 钥 和 ” 密 钥 来 保证 
指向 远程 服务 器 连接 的 安全 。 
A. 数字 
B. 标识 
C. 字母 
D. 组 合 
2. 测试 服务 器 文件 夹 是 Dreamweaver 用 来 


处 理 “的 文件 夹 。 
A. 首页 
B. 静态 页 
C. 动态 页 
D. 根 文件 
3. 使 用 站 点 功能 ， 既 可 以 从 “获取 ” 
或 “上 传 ”等 操作 中 排除 某 些 文件 和 文件 来， 又 
可 以 从 站 点 操作 中 遮盖 特定 类 型 的 文件 。 
A. 本 地 信息 
B. 遮盖 
C. 设计 备注 
D. 以 上 均 不 对 
4. 本 地 根 文件 夹 又 称 为 “” ” 主要 用 
于 存储 正在 处 理 的 文件 ,通常 位 于 本 地 计算 机 上 ， 
但 也 可 能 位 于 网 络 服务 器 上 。 
A. 根 文件 夹 
B. 网 站 站 点 
C. 远程 站 点 
D. 本 地 站 点 
5. 远程 文件 夹 应 始终 与 本 地 根 文件 夹具 有 
相同 的 目录 结构 ， 当 两 者 的 目录 结构 “时 ， 
其 Dreamweaver 则 会 将 文件 上 传 到 错误 的 位 置 。 
不 匹配 
相 匹配 
同步 


让 羡 
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UNmp 


6. 当 用 户 需 要 运行 测试 服务 器 或 在 本 地 计 
算 机 或 连接 到 的 网 络 文件 夹 上 存储 文件 时 ， 则 需 
要 将 【连接 方法 】 选 项 设置 为 ” 。 
A. FIP 
B. 本 地 /网 络 
Cs SPIF 
D. RDS 


三 、 问 答题 


1. 什么 是 站 点 ? 简 述 站 点 的 结构 。 
2. 如 何 建立 虚拟 目录 ? 
3. 如何 创建 本 地 站 点 ? 


四 、 上 机 练习 


配置 ASP 动态 站 点 

在 本 练习 中 ， 执 行 【 站 点 】| 【管理 站 点 】 
命令 , 在 弹出 的 【管理 站 点 】 对 话 框 中 , 单 击 【 新 
建站 点 】 命 令 。 在 弹出 的 【站 点 设置 对 象 】 对 话 
框 中 ， 激 活 【 服 务 器 】 选 项 卡 ， 并 单 击 【 添 加 新 
服务 器 】 按 钮 。 然 后 , 在 弹出 的 对 话 框 中 , 将 【 服 
务 器 名 称 】 设置 为 www， 将 【连接 方法 】 设 置 为 
【本 地 /网 络 ])， 将 Web URL 设置 为 http:/127.1.1.1/， 


并 设置 【服务 器 文件 夹 】 选 项 ， 如 图 2-70 所 示 。 





和 图 2-70 ,设置 站 点 


最 后 ， 激 活 【高 级 】 选 项 卡 ， 将 【服务 器 模 
型 】 设 置 为 ASPVBScript， 单 击 【 保 存 】 按 钮 即 
可 ， 如 图 2-71 所 示 。 





和 图 2-71 ,设置 服务 器 类 型 








网 页 文件 





3.1 创建 网 页 文档 





启动 Dreamweaver CC 2015 软件 ， 在 欢迎 屏幕 中 的 【新 建 】 栏 中 ， 选 择 所 需 创建 的 
文档 类 型 ， 即 可 快速 创建 所 选 文 档 类 型 的 空白 文档 ， 如 图 3-1 所 示 。 
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在 Dreamweaver CC 2015 窗口 中 ， 执 行 【文件 】|【 新 建 】 命 令 ， 在 弹出 的 【新 建文 
档 】 对 话 框 中 ， 激 活 【 新 建文 档 】 选 项 卡 ， 选 择 一 种 页 面 类 型 和 布局 ， 设 置 【 文 档 类 型 】 
选项 ， 并 单 击 【创建 】 按钮 ， 如 图 3-2 所 示 。 
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流体 网 格 ( 旧 版 ) 


总 口 使 月 Extract 从 Photoshop 夏令 二 交 寻 页 重 


图 单 击 
二 0 “| [ 攻 多 数 (7) 旭 消 GO 


3-2 ,命令 菜单 创建 




















在 Dreamweaver 窗口 中 ， 用 户 可 通过 CtrlHN 组 合 键 ， 快速 打开 【新 建文 档 〗 对 话 框 。 





2. 创建 流体 网 格 文档 
流体 网 格 布局 , 可 以 帮助 用 户 应 对 不 同 屏幕 尺寸 的 CSS 布局 .而 新 版 的 Dreamweaver 


者 装 汉 司 山上 潞 
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将 流体 网 格 文档 归纳 到 【新 建文 档 】 类 中 了 ， 用 户 只 需 执 行 【文件 】 | 新建】 命令 ， 在 
弹出 的 【新 建文 档 】 对 话 框 中 ， 激 活 【新 建文 档 】 选 项 卡 ， 选 择 【 流 体 网 格 〈 旧 版 7】 选 
项 ， 单 击 【 创 建 】 按 钮 即 可 ， 如 图 3-3 所 示 。 
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和 图 3-3_, 创 建 流体 网 格 文档 


3. 创建 启动 器 模板 文档 


Dreamweaver CC 2015 附带 启动 器 模板 ， 以 帮助 用 户 设计 站 点 页 面 。 执 行 【 文 件 】| 
【新 建 】 命 令 ， 在 弹出 的 【新 建文 档 】 对 话 框 中 激活 【启动 器 模板 】 选 项 卡 ， 在 【示例 文 
件 夹 】 列 表 框 中 选择 模板 类 型 ， 同 时 在 【示例 页 】 列 表 中 选择 一 种 模板 ， 单 击 【创建 】 
按钮 ， 如 图 3-4 所 示 。 
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和 图 3-4 创建 启动 器 模板 文档 
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4. 创建 网 站 模板 文档 


网 站 模板 文档 是 基于 用 户 所 创建 的 网 站 模板 文件 进行 创建 ， 在 创建 之 前 用 户 还 需要 
将 网 站 中 的 文档 保存 为 模板 类 型 ， 否 则 将 无 法 显示 模板 示例 内 容 。 

执行 【文件 】 | 新建】 命令 ， 在 弹出 的 【新 建文 档 】 对 话 框 中 激活 【网 站 模板 】 选 
项 卡 ， 在 【站 点 】 列 表 框 中 选择 一 个 站 点 ， 同 时 选择 一 个 站 点 模板 ， 单 击 【 创 建 】 按 钮 ， 
如 图 3-5 所 示 。 
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和 图 3-5_, 创 建 网 站 模板 文档 























创建 文档 并 对 文档 进 
行 一 系列 的 编辑 之 后 ， 为 - 
了 确保 编辑 内 容 不 会 丢 - 一 Ee 
失 ， 还 需要 将 网 页 文档 保 
存 到 本 地 计算 机 中 。 


1. 保存 文档 


对 于 新 创建 的 页 面 广 ee 
档 , 执行 【文件 】 保存】 | 
命令 ， 在 弹出 的 【另存 为 】 Y 

对 话 框 中 设置 保存 位 置 和 Lh 


名 称 ， 单 击 【保存 】 按 钮 ， 二 
如 图 3.6 所 示 。 & 图 3-6_ 保存 文档 

































































对 于 已 创建 并 保存 过 的 页 面 文档 , 当 用 户 需 要 更 改 其 保持 位 置 或 将 它 保存 为 副本 时 ， 
则 需要 执行 【文件 】|【 保 存 为 】 命 令 ， 在 弹出 的 【另存 为 】 对 话 框 中 设置 保存 位 置 和 名 
称 ， 单 击 【 保 存 】 按 钮 即 可 。 





2. 保存 为 模板 文档 


Dreamweaver CC 2015 为 用 户 提 供 了 保 
存 文 档 为 模板 功能 ， 以 方便 用 户 在 下 次 编辑 
网 页 时 使 用 。 

执行 【文件 】|【 另 存 为 模板 】 命 令 ， 在 下 
弹出 的 【另存 模板 】 对 话 框 中 选择 站 点 和 一 
模板 名 称 ， 单 击 【保存 】 按 钮 即 可 ， 如 图 3-7 
所 示 。 

3. 恢复 文档 


当 用 户 对 所 创建 的 文档 进 
行 保存 ， 再 次 打开 该 文档 并 对 
该 文档 进行 编辑 操作 时 ， 如 不 
满足 当前 的 编辑 操作 ， 则 可 以 
通过 “恢复 文档 ”功能 ， 撤 销 
当前 的 编辑 内 容 ， 将 该 文档 恢 
复 到 上 次 保存 时 的 状态 。 

执行 【文件 】| 【回复 至 上 
次 的 保存 】 命 令 ， 在 弹出 的 提 
示 对 话 框 中 单 击 【是 】 按 钮 ， 
即 可 将 当前 文档 恢复 到 上 次 保 
存 时 的 状态 ， 如 图 3-8 所 示 。 


二 和 图 3-8_, 恢 复 文档 
设置 网 页 文档 


用 户 创 建 完 空白 文档 之 后 ， 为 了 呈现 整个 页 面 的 结构 和 美观 性 ， 还 需要 设置 文档 的 
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页 面 属 性 和 文件 头 标签 。 


页 面 属性 关乎 整个 网 页 页 面 的 美观 性 ， 是 网 页 设计 的 基础 。 而 页 面 属 性 ， 是 对 网 页 
文档 中 的 内 容 进行 简单 的 定义 。 

执行 【修改 】| 【页面 属性 】 命 令 ， 弹 出 【页 面 属性 】 对 话 框 。 在 【页 面 属性 】 对 话 
框 中 的 【分 类 】 栏 中 ， 为 用 户 提供 了 【外 观 〈CSS)】【 外 观 (HTML)】、【 链 接 (CSS)】、 
【标题 〈CSS )】【 标 题 /编码 】〗】 和 【跟踪 图 像 】6 个 选项 卡 。 


1 外 (Css》 ES 






























































































































































在 【页 面 属性 】 对 话 框 中 RE 
的 【分 类 】 栏 中 激活 【外 观 he): 克 机 
《CSS)]】 选项 卡 ， 指 定 网 页 页 || i 
面包 括 字 体 、 背 景 颜色 、 背 景 背景 图 他 (7) Et 
图 像 等 若干 基本 页 面 的 布局 le 
选项 ， 如 图 3-9 所 示 。 ww: J :| 
在 【外 观 (CSS)】 选 项 卡 上 in): CI Tibet) 夯 到 
中 ， 主 要 包括 下 列 几 个 选项 : 
口 页 面 字体 用 于 指定 [一 BW [Ew sl | 
tp 人 了 图 3-9 .设置 【外 观 〈CSS)】 选项 
认 了 字体 系列。 


口 大 小 用 于 指定 在 网 页 页 面 中 使 用 的 默认 字体 的 大 小 。 

口 文本 颜色 用 于 指定 显示 字体 时 所 使 用 的 默认 字体 颜色 , 可 通过 单 击 【文本 颜色 】 

框 来 选取 颜色 。 

口 背景 颜色 用 于 设置 页 面 的 背景 颜色 ， 可 通过 单 击 【 人 背景 颜 色 】〗 杠 来 选取 颜色 。 

口 背景 图 像 ”用 于 设置 背景 图 像 ， 可 通过 单 击 【浏览 〗 按 钮 来 选取 背景 图 像 文件 。 

口 重复 ”用 于 指定 背景 图 像 在 页 面 上 的 显示 方式 ， 其 中 no-repeat 选项 表示 仅 显示 
背景 图 像 一 次 ，repeat 选项 表示 横向 和 纵向 重复 或 平 铺 图 像 ，repeat-x 选项 表示 
可 横向 平 铺 图 像 ，repeat-y 选项 表示 可 纵向 平 铺 图 像 。 

口 左 / 右 / 上 /下 边 距 用 于 指定 网 页 文档 中 内 容 到 浏览 器 左 侧 、 右 侧 、 上 侧 和 下 侧 

的 距离 。 


2. 外 观 CHTML) 


在 【页 面 属 性 】 对 话 框 中 的 【分 类 】 栏 中 激活 【外 观 CHIML)]】 选项 卡 ， 以 HTML 
或 XHTML 标签 的 属性 方式 定义 网 页 文档 中 一 些 基 本 对 象 的 样式 ， 如 图 3-10 所 示 。 
在 【外 观 (HTML)】 选 项 卡 中 ， 主 要 包括 下 列 几 个 选项 : 
口 背景 图 像 ”用 于 设置 网 页 的 背景 图 像 ， 可 通过 单 击 【 浏 览 〗 按 钮 选取 背景 图 像 
文件 。 
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口 背景 ”用 于 设置 页 面 的 背景 
闫 色 ， 单 击 【 文 本 颜色 】 框 可 
























































































选取 背景 颜色 。 CE 
口 文本 用 于 指定 文本 的 默认 于 表 果 (0): 国 
> 人 文本 9): 辐 己 访问 和 接 (: 国 | 
闫 色 。 檬 接 (D: 国 活动 拉 (A); 国 | 
D 已 访问 链接 用 于 指定 已 访 左边 距 () 边 距离 度 (9) 
问 链接 的 颜色 。 上 边 距 (p) 边 了 高度 0) 
口 链接 用 于 指定 链接 文本 的 
颜色 。 着 助 00 己 琵 | 孙 | | 应 有 WW | 





D 活动 链接 用 于 指定 当 鼠 标 [了 图 3-10 .设置 【外 观 (HTML)】 选项 
(或 指针 ) 在 链接 上 单 击 时 所 

应 用 的 颜色 。 

左 / 上 边 距 用 于 指定 页 面 到 浏览 器 左 侧 和 上 侧 的 距离 。 

边 距 宽度 /高 度 用 于 指定 页 面 到 浏览 器 右 侧 和 下 侧 的 距离 。 





口 
D 











3. 链接 (CSS) 
在 【页 面 属性 】 对 话 框 中 的 【分 短 豆 下 划 接 (css) 一 
类 】 栏 中 激活 【链接 (CSS)】 选项 | | 
长 ， 指 定 链接 字体 样式 、 字 体 大 小 、 a 错失 基色 (- 四 | [ ] 到 执 图 人 榜 挤 (8) 加 | 
颜色 等 选项 ， 如 图 3-11 所 示 。 ed ~ 和 村 挤 (W; 加 | 
在 【链接 (CSS)】 选 项 卡 中 ， 
主要 包括 下 列 儿 个 选项 : ED 国 
及 i 接 文 【了 图 3_11 .设置 [链接 (CSS)】 选项 
口 大 小 ”用 于 指定 链接 文本 的 字体 大 小 ， 其 字体 单位 可 以 为 px (像素 )、pt (点 小 


in (英寸 ) cm (厘米 ) 等 。 

链接 颜色 ”用 于 指定 应 用 于 链接 文本 的 颜色 。 

已 访问 链接 用 于 指定 应 用 于 已 访问 链接 的 颜色 。 

变换 图 像 链接 ”用 于 指定 当 鼠 标 (或 指针 ) 位 于 链接 上 时 所 出 现 的 颜色 。 

活动 链接 用 于 指定 当 鼠 标 (或 指针 ) 在 链接 上 单 击 时 所 出 现 的 颜色 。 

下 画 线 样式 ”用 于 指定 应 用 于 链接 的 下 画 线 样式 ， 包 括 “ 始 终 有 下 画 线 ” “始终 
无 下 画 线 ”“ 仅 在 变换 图 像 时 显示 下 画 线 ” 和 “变换 图 像 时 隐藏 下 画 线 ”4 种 样式 。 


4. 标题 (CSS) 


在 【页 面 属性 】 对 话 框 中 的 【分 类 】 栏 中 激活 【标题 (CSS)】 选 项 卡 ， 指 定 页 面 标 
题 的 字体 、 字 体 大 小 和 颜色 等 ， 如 图 3-12 所 示 。 
在 【标题 (CSS)】 选 项 卡 中 ， 主 要 包括 下 列 两 个 选项 : 
口 标题 字体 ”用 于 指定 标题 文本 使 用 的 默认 字体 系列 。 
口 标题 1~6 用 于 指定 最 多 6 个 级 别 的 标题 标签 使 用 的 字体 大 小 和 颜色 。 


[四面 虽 大 可 芽 理 大 可 | 
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标题 /编码 


在 【页 面 属性 】 对 话 框 中 的 【分 类 】 栏 中 激活 【标题 /编码 】 选 项 卡 ， 指 定 用 于 创作 网 页 
的 语言 专用 文档 编码 类 型 ， 以 及 与 该 编码 类 型 配合 使 用 的 Unicode 类 型 ， 如 图 3-13 所 示 。 



































































































































分 类 标题 (css) 标本 二 四 
| 。 看? 作 人 ): 加 《人 虱 ) 5 标 是 加: [E 吕 疝 刘 
标 是 10) [| Xi 型 nm: 欧西 | 
标题 2(2) -~ | 坊 四 日: [EGG ~ RT 
标题 3(3) -| mieoe 标准 化 表单 中 ，[E 0 克 妆 衣 ， 局 反倒 二 
标题 4(4) 四 | RE 口 和 包括 lnieode 签名 (30D(S) 
标题 5(5) -加 天 开 加 文件 文件 类 作 欠 新 手 到 襄 手 \ 末 文件 W5\ 产 品 简介 网 页 \ 
标题 6(6) -| 加 | 站 点 文件 夫 : 5: WUsersvrhanNFesktop\ 
二 的 [CC 要 [对 |[ 碳 欠 EE) 己 枉 J][ 到 [画册 






































和 图 3-12 ,设置 【标题 (CSS)】 选 项 和 图 3-13 ,设置 【标题 /编码 】 选 项 


在 
DD 
D 
D 


口 
D 





D 


【 标题/ 编码】 选项 卡 中 ， 主 要 包括 下 列 几 个 选项 ; 

标题 用 于 指定 在 “文档 ”窗口 和 大 多 数 浏 览 器 窗口 标题 栏 中 所 出 现 的 页 面 标题 。 
文档 类 型 ”用 于 指定 一 种 文档 类 型 定义 。 

编码 ”用 于 指定 文档 字符 所 使 用 的 编码 ， 当 用 户 选择 Unicode(UTF-8) 选 项 时 ， 由 
于 UTF-8 可 以 安全 地 显示 所 有 字符 ， 因 此 不 需要 实体 编码 。 

重新 载 入 单 击 该 按钮 可 以 转换 现 有 文档 或 者 使 用 新 编码 重新 打开 它 。 

Unicode 标准 化 表单 ”只 要 将 【编码 】 选 项 设置 为 Unicode(UTF-8) 时 该 选项 才 被 
激活 ， 它 包括 4 种 Unicode 范式 。 

包括 Unicode 签名 (BOM) 启用 该 复 选 框 ， 可 以 在 文档 中 包括 一 个 字 节 顺序 标 
记 (BOM)。 而 BOM 是 位 于 文本 文件 开头 的 2 一 4 个 字 节 ， 可 将 文件 标识 为 
Unicode, 



































6. 跟踪 图 像 分 类 a 
| 中国 你 () 0 一 
在 【页 面 属性 】 对 话 框 中 的 【分 | 人 二 se 二 a 
类 】 栏 中 激活 【跟踪 图 像 】 选项 卡 ， 
用 于 设置 在 设计 页 面 时 用 作 向 导 参 考 i | 


的 图 像 文件 ， 如 图 3-14 所 示 。 


在 





























【跟踪 图 像 】 选 项 卡 中 ， 主 要 在 了 图 3-14 ,设置 【跟踪 图 像 】 选 项 


包括 下 列 两 个 选项 : 


口 


口 


跟踪 图 像 ”用 于 指定 在 复制 设计 时 作为 参考 的 图 像 ， 可 通过 单 击 【浏览 】 按 钮 来 
选取 图 像 文件 。 该 图 像 只 供 参 考 ， 并 不 会 出 现在 浏览 器 中 。 
透明 度 ”用 于 设置 跟踪 图 像 的 透明 度 ， 从 完全 透明 到 完全 不 透明 。 


HTML 是 制作 网 页 的 一 种 规范 ,包括 文件 头 (head) 和 文件 体 (body) 两 部 分 内 容 。 
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BA 





其 中 ,文件 体 (body) 是 在 浏览 器 中 看 到 的 网 页 正文 部 分 ， 而 文件 头 (head) 则 是 对 网 
页 的 一 些 基 本 属性 及 页 面 控制 功能 进行 定义 的 标签 ， 其 内 容 不 会 在 浏览 器 正文 窗 格 中 
显示 。 

在 Dreamweaver CC 2015 中 ,用 户 可 通过 head 中 各 种 文件 头 标签 来 定义 网 页 的 标题 ， 
为 网 页 添加 搜索 关键 字 和 描述 信息 等 ， 以 方便 用 户 搜索 和 收录 网 页 。 


1. Meta 


Meta 标签 是 记录 当前 页 面 中 的 作者 、 
字符 编码 、 版 权 信 息 等 一 些 相关 信息 的 
head 元 素 。 在 Dreamweaver CC 2015 中 ， 
执行 【插入 】IHTMLIMeta 命令 ,在 弹出 的 
META 对 话 框 中 , 设置 相应 选项 , 如 图 3-15 
所 示 。 

在 META 对 话 框 中 ， 主 要 包括 下 列 3 
个 选项 : 皇 了 图 3-15 ,META 对 话 框 
口 属性 用 于 指定 Meta 标签 是 否 包 含有 关 页 面 的 描述 信息 或 HTTP 信息 。 
口 值 用 于 指定 要 在 此 标签 中 提供 的 信息 类 型 。Dreamweaver 中 的 值 有 各 自 的 属 

性 检查 器 ， 用 户 可 根据 实际 情况 指定 ome 
任何 值 ， 例 如 creationdate 、 















































documentID 或 level 等 。 pt 
口 内 容 “用 于 描述 实际 的 信息 说 明 ， 例 as 
如 为 “ 值 ”指定 了 等 级 等。 ED 
在 META 对 话 框 中 ， 单 击 【 确 定 】 按 钮 而 3 sw 


后 ， 系 统 将 自动 在 【代码 】 视 图 中 插入 一 个 必 
有 关 META 代码 。 将 光标 放置 在 该 代码 中 ， et 
系统 会 在 其 下 方 的 【属性 】 面 板 中 显示 该 代 上 民 

码 信息 ， 便 于 用 户 对 其 进行 修改 ， 如 图 3-16 
所 示 。 


ee 和 图 3-16 修改 Meta 标签 


2. 关键 字 


设置 关键 字 是 方便 搜索 引擎 装置 对 其 进行 读 取 ， 并 使 用 该 关键 字 信息 在 它们 的 数据 
库 中 将 用 户 的 页 面 编 入 索引 。 由 于 部 分 搜索 引擎 对 索引 的 关键 字 或 字符 的 数目 进行 了 限 
制 ， 或 者 在 超过 限制 的 数目 时 将 忽略 所 有 的 关键 字 ; 因此 ， 用 户 最 好 只 设置 几 个 通过 精 
心 选择 的 关键 字 。 

在 Dreamweaver CC 2015 中 ,执行 [插入 】IHTMLI【 关 键 字 ] 命 令 , 在 弹出 的 Keywords 





对 话 框 中 的 【关键 字 】 文 本 框 中 输入 多 个 关键 字 ， 并 以 逗号 分 隔 每 个 关键 字 ， 如 图 3-17 
所 示 。 

在 【关键 字 】 对 话 框 中 ， 单 击 【 确 定 】 按 钮 后 ， 系 统 将 在 【代码 】 视 图 中 插入 一 行 
有 关 关 键 字 的 代码 。 将 光标 放置 在 该 代码 中 ， 系 统 会 在 其 下 方 的 【属性 】 面 板 中 显示 该 
代码 信息 ， 便 于 用 户 对 其 进行 修改 ， 如 图 3-18 所 示 。 


<ldoctype html> 
<html> 
<head> 


<meta Ne 
<title> 无 标题 文档 
De 


</body> 
</html> 






































和 图 3-17 ,Keywords 对 话 框 和 图 3-18 修改 关键 字 


3. 说 明 


说 明 是 用 于 描述 有 关 网 页 的 说 明 性 信息 ， 它 与 关键 字 一 样 ， 会 受到 搜索 引擎 限制 字 
符 数 这 一 条 件 的 限制 ， 因 此 在 设置 说 明文 本 时 用 户 应 尽量 限制 为 少量 的 几 个 字 。 

在 Dreamweaver CC 2015 中 ,执行 【插入 】IHTMLI【 说 明 】 命令 ,在 弹出 的 【说 明 】 
对 话 框 中 的 【说 明 】 文 本 框 中 ， 输 入 说 明文 本 ， 如 图 3-19 所 示 。 

在 【说 明 】 对 话 框 中 ， 单 击 【 确 定 】 按 钮 后 ， 系 统 将 自动 在 【代码 】 窗 口中 显示 一 
行 有 关 说 明 的 代码 。 将 光标 放置 在 该 代码 中 ， 系 统 会 在 其 下 方 的 【属性 】 面 板 中 显示 该 
代码 信息 ， 便 于 用 户 对 其 进行 修改 ， 如 图 3-20 所 示 。 














<ldoctype html> 
<html> 

<head> 

<meta charset="Utf-8"> 
<title> 无 标题 文档 </title> 
</head> 


| y <body> 









































和 图 3-19 【说 明 】 对 话 框 用 了 图 3-20 ,修改 说 明 标签 
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4. 视 口 














在 Dreamweaver CC2015 中 ，|B : en hab 
新 增 了 视 口 信息 设置 功能 , 主要 国 3 se eo 
用 于 控制 网 页 布局 的 大 小 。 E | ree /tive 
执行 【插入 】IHTMLI【 视 口 】 上 | 
命令 ， 系 统 会 直接 在 【代码 ] 窗 国 。 se senz [去 ] 2 
中 显示 一 行 有 关 视 口 信息 的 代 冉 局 全 mmo 人 
码 。 将 光标 放置 在 该 代码 中 , 系 | 导 国 [ness 


统 会 在 其 下 方 的 【属性 】 面 板 中 
显示 该 代码 信息 ， 便 于 用 户 对 其 
进行 修改 ， 如 图 3-21 所 示 。 

该 代码 中 的 width-device-width 《了 图 3-21 .修改 视 口 标签 
表示 视 口 默认 宽度 为 屏幕 宽度 ， 
而 initial-scale 用 于 设置 网 页 的 初始 缩放 比例 ， 当 该 属性 为 1 时 则 表示 网 页 的 初始 大 小 为 
屏幕 面积 的 100%。 











管理 文件 和 文件 夹 是 利用 【文件 】 面 板 管理 本 地 文件 并 在 本 地 和 远程 服务 器 之 间 传 
输 文件 ， 包 括 创建 文件 夹 、 复 制 文件 、 删 除 文件 、 重 命名 文件 等 ， 以 及 查找 和 定位 文件 、 
迹 盖 文件 等 一 系列 的 管理 操作 。 


Dreamweaver CC 2015 内 置 了 【文件 】 面 板 ， 以 方便 用 户 管理 本 地 和 远程 站 点 中 的 
文件 ， 用 来 维持 本 地 和 远程 站 点 文件 和 文件 夹 结构 的 平衡 。 

执行 【窗口 】|I 【文件 】 命 令 ， 即 可 展开 【文件 】 面 板 ， 用 来 查看 相应 站 点 中 的 文件 
和 文件 夹 ， 如 图 3-22 所 示 。 

在 【文件 】 面 板 中 ， 除 了 可 以 查看 站 点 对 应 的 文件 和 文件 之 外 ， 还 可 以 通过 面板 中 
的 工具 按钮 ， 对 文件 或 文件 夹 进 行 一 些 常规 操作 。 其 中 ， 在 【文件 】 面 板 中 ， 主 要 包括 
下 列 10 种 工具 按钮 : 

口 站 点 弹出 菜单 ”用 于 显示 该 站 点 的 文件 ,还 可 以 使 用 【站 点 弹出 】 菜 单 访问 本 地 

磁盘 上 的 全 部 文件 ， 类 似 于 Windows 资源 管理 器 。 

口 文件 视图 用 于 显示 远程 和 本 地 站 点 的 文件 结构 ， 其 默认 视图 为 【本 地 视图 】. 

口 连接 / 断 开 用 于 连接 到 远程 站 点 或 断 开 与 远程 站 点 的 连接 。 默 认 情 况 下 ， 当 空 
闲 30 分 钟 以 上 ， 将 断 开 与 远程 站 点 的 连接 ( 仅 限 FTP )。 





口 刷新 用 于 刷新 本 地 和 








一 
口 获取 文件 ”用 于 将 选 定 了 区 





文件 从 远程 站 点 复制 到 
本 地 站 点 ( 如 果 该 文件 有 
本 地 副本 ， 则 将 其 覆盖 ) 
口 上 传 文件 ”将 选 定 的 文 


! TELeyer progass 





件 从 本 地 站 点 复制 到 远 加 Fiyrlayer_Progress .1.39B FLY 文件 2014-06-13 四 

上 占 一 回 2z.mp3 229IB 是 3 文件 2014-06-13 11:48 
程 站 点 。 日 -多 Seripts 文件 夹 。 2016-11-03 11:09 - 

口 取出 文件 “用 于 将 文件 swfobject modiE 22 了 Jerss... 2014-06-13 11: 铭 
i 文件 夹 。 2016-11-03 11:09 - 

从 远程 服务 器 传输 到 本 92KB JPG 文件 2014-06-13 11:48 

index. Adebe. .2014-06-13 11; 
地 站 点 ， 并 在 本 地 站 点 中 i JP6 文件 3 i 





创建 副本 ( 如 果 该 文件 有 


日 期: 2014-06-13 11:48 大 小 : 229KB 


本 地 副本 ， 则 将 其 禾 盖 )， 轿 一 





而 在 服务 器 上 将 该 文件 [了 图 3-22 【文件 ] 面板 
标记 为 取出 。 

口 存 回 文件 用 于 将 本 地 文件 的 副本 传输 到 远程 服务 器 , 并 且 使 该 文件 可 供 他 人 编 
辑 。 本 地 文件 变 为 只 读 。 

口 同步 可 以 同步 本 地 和 远程 文件 夹 之 间 的 文件 。 

口 展开 /折合 ”展开 或 折 司 【文件 】〗 面 板 以 显示 一 个 或 两 个 窗 格 。 





在 【文件 】 面 板 中 ， 用 户 不 仅 | 
可 以 打开 本 地 文件 夹 中 的 文件 、 对 
文件 进行 更 名 操作 ， 还 可 以 添加 或 
删除 文件 。 

1. 打开 文件 


首先 ， 在 【文件 】 面 板 中 ， 从 
【站 点 弹出 】 菜单 中 选择 站 点 、 服 务 
器 或 驱动 器 。 然 后 ， 在 显示 的 站 点 
文件 结构 列表 中 选择 所 需 打 开 的 文 
件 ， 单 击 【 文 件 】 面 板 中 的 【选项 】 
按钮 ， 执 行 【 文 件 】 | 【打开 ) 命令 ， 
即 可 打开 该 文件 ， 如 图 3-23 所 示 。 《了 图 3-23 .打开 文件 
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2. 新 建文 件 或 文件 夹 


在 【文件 】 面 板 中 ， 选 择 所 需要 
在 其 位 置 中 新 建文 件 或 文件 夹 的 已 
存在 文件 名 称 ， 单 击 【 选 项 】 按 钮 ， 
执行 【文件 】| 【新 建文 件 】 或 【新 建 
文件 夹 】 命 令 ， 即 可 创建 一 个 文件 或 
文件 夹 ， 如 图 3-24 所 示 。 
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3. 删除 文件 或 文件 夹 


在 显示 的 站 点 文件 结构 列表 中 ， 
选择 需要 删除 的 文件 或 文件 夹 ， 单 击 
【选项 】 按 钮 ， 执 行 【文件 】 代 删除 】 
命令 。 然 后, 在 弹出 的 提示 对 话 框 中 ， 
单 击 【是 按钮 即 可 , 如 图 3-25 所 示 。 











4. 重 命 名 文件 或 文件 夹 J 图 3-25 删除 文件 或 文件 夹 


选择 要 重 命名 的 文件 或 文件 夹 ， 右 Ez 
击 ， 执 行 【 编 辑 】|【 重 命名 】 命令， 此 时 EE si 本 














文件 或 文件 夹 名 称 处 于 激活 状态 ， 直 接 输 下 全 A 
入 新 的 名 称 , 按 下 Enter 键 即 可 ,如 图 3-26 SCCe5 ,= 
所 示 。 ER ey 新 于 广 伯 交 (R) 
~ smo) (0) 
加 和 [一 一 > 
英 加 IO Cerl+X » 
ANI Cul+C 选择 (S) » 
SS 
Del 取出 昌 
| Cal+D 上 传 (P) 
了 存 目 (H 














5. 移动 文件 或 文件 夹 


在 了 图 3-26 _, 重 命名 文件 或 文件 夹 
选择 要 移动 的 文件 或 文件 夹 , 将 该 文件 或 文件 夹 拖 到 新 位 置 , 松 开 鼠标 后 会 弹出 【更 








新 文件 】 对 话 框 ， 在 该 对 话 框 中 单 击 
【更 新 】 按 钮 即 可 ， 如 图 3-27 所 示 。 
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另外 ， 选 择 要 移动 的 文件 或 文件 2 L Sam Te 文 了 bp 
夹 ， 单 击 【 选 项 】 按 钮 ， 执 行 【编辑 】| [本 
【 剪 切 】 命 令 ， 前 切 该 文件 , 如 图 3-28 
所 示 。 了 图 3-27 ,移动 文件 或 文件 夹 

然后 ， 选 择 所 需要 放置 文件 的 位 置 ， 单 击 【 选 项 】 按 钮 ， 执 行 【 编 辑 】| 【粘贴 】 命 
令 ， 在 弹出 的 【更 新 文件 】 对 话 框 中 ， 单 击 【 更 新 】 按 钮 ， 即 可 移动 该 文件 或 文件 夹 ， 
如 图 3-29 所 示 。 
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有 
图 3-28_, 剪 切 文件 图 3-29 粘贴 文件 
6. 刷新 文件 面板 





右 击 任 意 文 件 或 文件 夹 ， 执 行 【 刷 新 本 地 文件 】 命 令 ; 或 者 ， 单 击 【文件 】 面 板 中 
的 【刷新 】 按 钮 ， 刷 新 文件 面板 ， 如 图 3-30 所 示 。 
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对 于 大 型 的 网 站 来 讲 ， 本 地 站 点 或 
远程 站 点 中 会 存放 大 量 的 文件 ， 在 查找 
一 些 比较 新 的 文件 时 会 比较 费时 、 费 
力 。 此 时 ， 可 以 使 用 查找 和 定位 功能 ， 
快速 查找 和 定位 所 需 文件 或 文件 夹 。 


1. 定位 文件 
在 【文件 】 面 板 中 ， 选 择 需要 定位 
的 文件 ， 单 击 【 选 项 】 按 钮 ， 执 行 【 编 


辑 】|【 本 地 站 点 中 定位 】 或 【在 远程 服 在 了 图 3-30 。 刷 新 文件 面板 
务 器 上 定位 】 命 令 ， 即 可 在 本 地 和 远程 站 点 中 查找 该 文件 ， 如 图 3-31 所 示 。 


2. 查找 较 新 的 文件 


在 【文件 】 面 板 中 ， 单 击 【 选 项 】 按 钮 ， 执 行 【 编 辑 】| 【选择 较 新 的 本 地 文件 】 或 
【选择 远程 服务 器 上 的 较 新 文件 】 命令 , 即 可 查找 本 地 或 远程 服务 器 上 比较 新 的 文件 ， 如 
图 3-32 所 示 。 


















































图 3-31 ,定位 文件 和 图 3-32 查找 较 新 的 文件 


3. 查找 最 近 修改 的 文件 


在 【文件 】 面板 中 ， 单 击 【选项 】 按 钮 ， 执 行 【 编 辑 】 代 选择 最 近 修改 日 期 】 命 令 ， 
在 弹出 的 【选择 最 近 修 改 日 期 】 对 话 框 中 ， 设 置 各 选项 ， 单 击 【确定 】 按 钮 ， 即 可 查找 


最 新 修改 的 文件 ， 如 图 3-33 所 示 。 
在 【选择 最 近 修改 日 期 】 对 话 框 中 ， 



































主要 包括 下 列 两 个 选项 : 
口 创建 或 修改 文件 于 最 近 ”选中 该 | 〇 在 期间 8 峙 或 个 的 文件 : 二 
选项 , 输入 离 当 日 的 天 数值 ， 即 可 | 大 天 本 到 


查找 相应 天 数 内 的 修改 文件 。 例 | 珊 本 
如 , 要 找到 昨天 和 今天 所 修改 过 的 GH conte 
文件 ， 则 可 以 输入 数字 “2”。 

口 在 此 期 间 创 建 或 修改 的 文件 选 
中 该 选项 , 则 可 以 查找 指定 日 期 范 所 7 图 3-33 ,查找 最 近 修改 的 文件 
围 内 的 修改 文件 。 





利用 Dreamweaver 中 的 遮盖 功能 ， 可 以 从 “获取 ”或 “上 传 ” 等 操作 中 排除 某 些 文 
件 、 文 件 夹 和 文件 类 型 ， 以 方便 用 户 有 选择 性 地 获取 或 上 传 文件 。 


1 启用 和 禁用 遮盖 功能 
aaa aa | 
默认 情况 下 ， 沁 盖 工 具 处 于 启动 状语 遇 证 “ 


态 ， 用 户 不 仅 可 以 通过 相应 操作 永久 禁 
用 该 功能 ， 而 且 还 可 以 对 所 有 文件 在 执 
行 某 一 操作 时 临时 禁用 谈 盖 功能 。 而 当 
禁用 迹 盖 功 能 后 ， 所 有 谈 盖 文件 者 会 取 
消 遗 盖 ， 当 再 次 启用 中 盖 功 能 时 ， 所 有 
先前 迹 盖 的 文件 将 恢复 迹 盖 。 

在 【文件 】 面 板 中 ， 选 择 一 个 文件 
或 文件 夹 ， 右 击 ， 执 行 【 训 盖 ] 1【 启 用 lea| 。 
遮盖 】 命 令 ， 即 可 启用 遗 盖 功 能 ， 如 图 一 一 
3-34 所 示 。 KJ 图 3-34 启用 遮盖 功能 

当 用 户 再 次 右 击 文件 或 文件 夹 ， 执 行 【 谈 盖 】I 【启用 谈 盖 】 命 令 时 ， 即 可 禁用 迹 盖 
功能 。 


Tn te a es raansaaonaansa | 


2. 遮盖 文件 和 文件 夹 


在 【文件 】 面 板 中 ， 选 择 需 要 遮盖 的 文件 或 文件 夹 ， 右 击 ， 执 行 【 遮 盖 】|【 谈 盖 】 
命令 ， 即 可 遮盖 所 选 文 件 或 文件 夹 ， 如 图 3-35 所 示 。 
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3. 取消 遮盖 文件 和 文件 夹 


被 遮盖 的 文件 和 文件 夹 以 红色 和 斜 线 进行 标注 ， 此 时 ， 选 择 被 遮盖 的 文件 或 文件 夹 ， 
右 击 ， 执 行 【遮盖 】| 【取消 遮盖 】 命 令 ， 即 可 取消 遮盖 文件 和 文件 夹 ， 如 图 3-36 所 示 。 
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和 图 3-35 遮盖 文件 和 图 3-36 取消 遮盖 文件 夹 





用 户 除 对 本 地 站 点 进行 操作 以 外 ， 还 可 以 对 远程 站 点 文件 进行 操作 。 例 如 ， 将 远程 
文件 取出 到 本 地 站 点 中 、 将 本 地 站 点 存 回 到 远程 的 站 点 ， 以 及 将 远程 和 本 地 站 点 之 间 的 
文件 进行 同步 操作 等 。 





Dreamweaver 为 用 户 提 供 协作 工作 的 环境 ， 即 存 回 和 取出 文件 。 如 果 要 对 远程 服务 
器 中 的 站 点 文件 进行 存 回 和 取出 操作 , 则 
必须 先 将 本 地 站 点 与 远程 服务 器 相关 联 ， 
然后 才能 使 用 该 功能 。 


1. 设置 存 回 /取出 系统 


执行 【站 点 】|【 管 理 站 点 】 命 令 ， 
在 弹出 的 【管理 站 点 】 对 话 框 中 , 选择 站 
点 名 称 ， 单 击 【 编 辑 当前 选 定 的 站 点 】 按 
钮 ， 如 图 3-37 所 示 。 

然后 ， 在 弹出 的 【站 点 设置 对 象 动 了 图 3-37 .选择 站 点 


















































漫 设计 】 对 话 框 中 激活 【服务 器 】 选 项 卡 ， 选 择 服 务 器 名 称 ， 单 击 【编辑 现 有 服务 器 】 
按钮 ， 如 图 3-38 所 示 。 





和 图 3-38 ,选择 服务 器 


激活 【高 级 】 选 项 卡 ， 启 用 【启用 文件 取出 功能 】 复 选 框 ， 同 时 启用 【打开 文件 之 
前 取出 】 复 选 框 ， 设 置 【 取 出 名 称 】 
和 【电子 邮件 地 址 】 选 项 ， 单 击 【 保 
存 】 按 钮 即 可 ， 如 图 3-39 所 示 。 
其 中 ,有 关 取 出 选项 的 具体 含义 ， 
如 下 所 述 : 
口 打开 文件 之 前 取出 ”启用 该 
复 选 框 , 表示 在 【文件 面板 
中 双击 打开 文件 时 系统 将 自 
动 取出 这 些 文件 。 
口 取出 名 称 设置 该 选项 后 , 其 
取出 名 称 会 显示 在 【文件 ] 面 了 图 3-39 .设置 文件 取出 功能 
板 中 已 取出 文件 的 旁边 。 
口 电子 邮件 地 址 设置 该 选项 后 ， 其 邮件 名 称 将 以 链接 形式 出 现在 【文件 〗 面 板 中 
该 文件 的 旁边 。 
2. 取出 文件 


在 【文件 】 面 板 中 ， 选 择 所 需 取出 的 文件 或 文件 夹 ， 单 击 面 板 工具 栏 中 的 【取出 文 
件 】 按 钮 。 在 弹出 的 【相关 文件 】 对 话 框 中 ， 单 击 【 是 】 按 钮 ， 会 将 相关 文件 随 选 定 文 
件 一 起 下 载 ， 单 击 【 否 】 按 钮 ， 则 不 下 载 相关 文件 ， 如 图 3-40 所 示 。 
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3. 存 回 文件 


在 【文件 】 面 板 中 ， 选 择 文件 或 文件 夹 ， 单 击 工具 栏 中 的 【 存 回 文件 】 按 钮 ， 在 弹 
出 的 【相关 文件 】 对 话 框 中 单 击 【 是 】 或 【和 否 】 按 钮 即 可 ， 如 图 3-41 所 示 。 











文件 
加 动 妇 设计 ~ sei [z, O | § tlta 2 | 加 


| 云 得 服务 要。 一” [大 小 [ 关 型 】 



































和 图 3-40 ,取出 文件 和 图 3-41 _, 存 回 文件 





在 【文件 】 面 板 中 ， 单 击 【 选 项 】 按 钮 ， 执 行 【 站 点 】| 【同步 】 命 令 ; 或 者 直接 单 
击 【 文 件 】 面 板 工具 栏 中 的 【同步 】 按 钮 ， 在 弹出 的 【与 远程 服务 器 同步 】 对 话 框 中 ， 
设置 相应 选项 即 可 ， 如 图 3-42 所 示 。 

其 中 ， 单 击 【 同 步 】 下 拉 按钮 ， 在 其 列表 

















中 包括 了 下 列 两 个 选项 : 机 
方向 (0) | 获得 和 放置 较 新 的 文件 YY 取消 (C) 











口 整个 “动漫 设计 ' 站 点 该 选项 可 将 本 
地 站 点 中 与 服务 器 站 点 中 的 全 部 文件 | 口 册 $ab 各 上 没有 的 这 文件 
进行 同步 操作 。 

口 仅 选中 的 远 端 文件 “该 选项 可 将 本 地 万】 图 3-42 。 同 步 文件 
站 点 中 已 经 选择 的 文件 与 远程 服务 器 的 文件 进行 同步 操作 。 

另外 ， 单 击 【 方 向 】 下 拉 按 钮 ， 在 其 列表 中 则 包含 了 下 列 3 种 选项 : 

口 获得 和 放置 较 新 的 文件 “将 所 有 文件 的 最 新 版 本 放置 在 本 地 和 远程 站 点 上 。 

口 放置 较 新 的 文件 “上传 在 远程 服务 器 上 不 存在 或 自从 上 次 上 传 以 来 已 更 改 的 所 

有 本 地 文件 。 

口 从 远程 获得 较 新 的 文件 ”下载 本 地 不 存在 或 自从 上 次 下 载 以 来 已 更 改 的 所 有 远 
程 文件 。 

而 当 用 户 在 【与 远程 服务 器 同步 】 对 话 框 中 ， 启 用 【删除 本 地 驱动 器 上 没有 的 远 端 
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文件 】 复 选 框 ， 则 可 在 目的 地 站 点 上 删除 在 原始 站 点 上 没有 对 应 文件 的 文件 。 


A | 





3.5 课堂 练习 : 制作 “通知 ”页 面 


Dreamweaver 支持 所 见 即 所 得 的 设计 方式 。 例 如 ， 可 以 通过 输入 文本 ， 制 作 一 些 简 
单 的 网 页 。 本 练习 将 使 用 Dreamweaver 的 这 个 功能 , 制作 一 个 通知 页 面 , 如 图 3-43 所 示 。 
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D》 高 业 ” 国 MAKA 图 主 Ss 的 工 四 3 ; 点 转 -“ 回 -广内 -月 
2017 年 元 旦 放假 通知 





根据 《国务 院 办 公 厅 关于 2017 年 部 分 节假日 安排 通知 》， 今 年 元 旦 
放假 时 间 为 ] 月 1 日 至 1 月 3 日 ， 共 3 天 。 其中: 1 月 1 日 〈 星 期 日 ) 为 法 定 节 
假日 ，2 月 1 日 为 1? 月 31 日 《星球 六 》 调 休 ，1 月 3 日 为 ] 月 1 日 〈 星 期 日 
调 休 。 
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和 图 3-43 。“ 通 知 ” 页 面 





操作 步骤 : 

执行 【文件 ]I[ 新 建 ] 命令 , 在 【 文档 类 型 
列表 框 中 选择 HTML 选项 , 创建 一 个 空白 页 
面 ， 如 图 3-44 所 示 。 


































































































了 和 图 3-45 。【 属 性】 面板 
坝 
中 
: Er 
至 i 
SE JS 外观 (Cs5) 
| 页 面 字体 人); [加 内 字体 司 本 
加 受 xihe:[ 可 压 国 
| 号 xm 模板 文本 本 色 (D): 国 | 
号 Pe 模板 背景 声色 (8): [5 tdsee 
Eled 背景 图 像 (1) [DD... 
重 夏 (:) 设 训 
J 图 3-44 创建 空白 页 面 Bw 
上 边 距 @) 3 下 边 距 (0) 
在 页 面 下 方 的 【 属性 ] 面板 中 ， 单 击 【 页 面 
属性 】 按钮 ， 如 图 3-45 所 示 。 ET CD i RW 












































在 【 页面 属 性 】 对 话 框 中 的 【外 观 (CSS )] ee 
选项 卡 中 ， 设置 页 面 文本 大 小 、 文本 颜色 和 | 人 图 3-46 设置 外 观 (CSS) 


背景 颜色 ， 如 图 3-46 所 示 。 激活 左 侧 【 标题 /编码 】 选项 卡 ， 在 【标题 】 
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文本 框 中 输入 页 面 标题 ， 并 单 击 【 确定 ] 按 
钮 ， 如 图 3-47 所 示 。 








分 类 标题 /编码 














标量 (D): 攻 
Xr) 
坑 3®) 
四 激活 | 和 tt): 区 








文件 文件 夹 
站 点 文件 夹 : D:\sites\ 











[加 |] [BR | [mW | 
用 了 图 3-47 设置 标题 


在 【设计 】 视 图 中 ， 输 入 通知 内 容 ， 如 图 
3-48 所 示 。 

习 2017 年 元 日 放假 通知 

司 根据 《国务 院 办 公 厅 关于 2017 年 部 分 节假日 安排 通知 》， 

今年 元 旦 放假 时 间 为 1 月 1 日 至 1 月 3 日 , 共 3 天 。 其 中 :1 月 1 日 


(星期 日 ) 为 法 定 节假日 ，2 月 1 日 为 12 月 31 日 (星星 期 六 ) 
疆 调 休 ，1 月 3 日 为 1! 月 1 日 (星期 日 ) 调 休 。 



































入 图 3-48 ,输入 通知 内 容 


回 选择 全 部 文本 内 容 , 执行 [插入 ]IDiv 命令 ， 
在 【插入 Div 】 对 话 框 中 ， 单 击 【 确定】 按 
钮 , 将 文本 包含 在 一 个 <div></div> 标 签 中 ， 
如 图 3-49 所 示 。 























插入 : | 在 选 定 内 容 旁 换 行 。 ~ - 
Class: | ~ C4 一 
帮助 
ID ~ ee 
新 建 css 规则 





和 | 图 3-49 插入 Div 标签 










命令 , 在 [ 插入 Article ] 对 话 框 中 , 单 击 [ 确 
定 】 按钮 ， 如 图 3-52 所 示 。 
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2017 年 元 旦 放假 通知 立国 
上 na， 今年 元 放假 | 
藉 : 
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3 夫 。 其 中 : 1 月 1 日 (星期 日) 为 法 定 节假日 ，2 月 1 日 为 1 
固 休 ，1 月 3 日 为 1 月 1 日 (星期日) 调 休 




















插入 | 在 选 定 内 容 旁 换行 。 Y | | 
单 





























有 > | 
[于 助 | 
1D: v 
新 建 css 规则 | | 
和 | 图 3-52 ,设置 内 容 格式 


将 光标 定位 在 “根据 ”文本 前 面 ， 按 下 
Ctrl+Shift+Space 组 合 键 缩 进 首 行 文本 , 如 
图 3-53 所 示 。 





























选择 标题 名 称 ， 执 行 【 格 式 】 【段落 格式 】 
1【 标题 1 】 命令， 设置 标题 的 段落 格式 ， 如 
图 3-50 所 示 。 

图 在 [属性 】 面 板 中 ， 激 活 CSS 选项 卡 ， 单 








I PR ,PPP :ER 寺 肌 
2017 年 元 旦 放假 
匡 [ 这 4 公 厅 关于 2017 年 部 分 节假日 安 排 通知 》， 
至 1 缩 进 峙 中 :1 月 1 日 (星期 日 ) 为 法 定 节假日 ， 
昌 灯 ， 器 〈 星 期 日 ) 调 休 。 














击 【 居中 对 齐 】 按钮 ,设置 标题 为 居中 显示 
格式 ， 如 图 3-51 所 示 。 
图 选择 标题 以 外 的 内 容 , 执行 [插入 [文章 】 


& 图 3-53_, 首 行 缩 进 
将 光标 定位 在 标题 文本 后 ， 执 行 【 插入】 


IHTMLI【 水平 线 】 命令， 插入 一 条 水 平 线 ， 选择 正文 内 容 ， 在 【 属性 】 面 板 中 的 CSS 
如 图 3-54 所 示 。 选项 卡 中 ,将 【 大 小 】 设 置 为 “20”， 如 图 
3-55 所 示 。 




































































4 3-55 _ 设 置 字体 大 小 





随 着 互联 网 的 逐步 普及 ， 越 来 越 多 的 人 通过 网 络 来 查找 自己 需要 的 信息 。 一 些 为 广 
大 学 生 提供 学 习 和 考试 资料 的 网 站 也 应 运 而 生 ， 本 练习 将 通过 插入 特殊 符号 等 功能 来 制 
作 一 个 数学 试题 网 页 ， 如 图 3-56 所 示 。 


《一 元 二 次 方程 》 测 试题 











它 的 一 次 项 系数 旺 
财 , 万 查 为 一 元 二 次 方程， 当 直 


于 ， 两 各 互 为 相反 
人 新 一 元 二 次 方 各 的 两 各 那么 这 个 新 一 元 二 次 方程 


7 有 有 葵 户 s2ma- 120 有 丙 个 负 侧 ， 则 J 的 职 傅 克 园 天 


EE MEN, mp, We) = 


[TFT 





(0 二 -rr lv0 (用 公民 法 (0 4 ~ ming (用 配方 和 












， 和 解答 狂 《 弓 镍 10 分 ， 共 10 分 ) 
识 牛 4 月 价 销 售 基 为 50 万 元 ， 第 二 笠 价 的 总 销售 舌 为 130 万 元 . 车 5、 丙 个 月 的 月 增长 窑 相 同 ， 玉 月 增长 事 。 


和 图 3-56 ,数学 试题 网 页 









































操作 步骤 : 
新 建 空白 文档 ， 在 页 面 下 方 的 【属性 】 面 
板 中 ， 单 击 【 页 面 属性 】 按钮 ， 如 图 3-57 格式 (F) 无 ~ 区 [元 ~ 全 BN 
所 示 。 2 EE CE 
在 【 页面 属性 ] 对 话 框 中 的 【外 观 (CSS )] SEE 到 
选项 卡 中 , 设置 页 面 文本 大 小 、 文 本 颜色 和 
背景 颜色 ， 如 图 3-58 所 示 。 用 了 图 3-57 【属性 】 面 板 
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选择 插入 的 表格 ， 在 【 属性 】 面 板 中 ， 将 
Align 设置 为 【居中 对 齐 ]， 如 图 3-61 
所 示 。 






































ry 


人 图 3-58 ,设置 外 观 (CSS) 


激活 左 侧 【 标题 /编码 】 选 项 卡 ， 在 【 标题 】 
文本 框 中 输入 页 面 标题 ， 并 单 击 【 确定 】 按 
钮 ， 如 图 3-59 所 示 。 
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3-59 设置 标题 





执行 【插入 】1 【表格 】 命令, 插入 6 行 1 
列 , 宽度 为 800 像素 , 边框 粗细 为 1 像素 的 
表格 ， 如 图 3-60 所 示 。 





























































































































& 图 3-61 ,设置 对 齐 格式 





回 选择 表格 第 2 行 , 执行 【插入 】1 【表格 】 
命令 ,插入 7 行 1 列 的 府 套 表格 ,如 图 3-62 
所 示 。 

















































































































& 图 3-60 ,插入 表格 


表格 大 小 〖&K 了 图 3-62_ 插入 7 行 工 列 的 嵌 套 表格 
行 数 : 列 :[ 
表格 宽度 : [800 || 仿 素 “~| 在 【设计 】 视 图 中 , 逐 行 输入 数学 试题 文本 ， 
和 一 让 如 图 3-63 所 示 。 
单元 格 边 距 : 0 
单元 格 间距 : [0 旦 杞 ER TI 
标题 E 
四 设置 
EE 图 二 
无 左 页 部 
辅助 功能 
标题 
摘要 
Ea 
Em CC 

















和 图 3-63 ,输入 数学 试题 


图 选择 文本 中 的 第 1 个 字母 ,执行 【格式 】| 
【HTML 样式 】| 【 斜体 】 命令 ， 设 置 字母 余 
体格 式 ， 如 图 3-64 所 示 。 使 用 同样 方法 ， 
设置 其 他 字母 的 斜体 格式 。 
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下 
1 了 图 3-64 .设置 斜体 格式 

图 选择 第 2 行 m 后面 的 数字 2, 切 换 到 [ 代码 】 
视图 中 ， 在 该 数字 前 后 添加 <sup></sup> 


标签 ， 将 其 设置 为 上 标 ， 如 图 3-65 所 示 。 
使 用 同样 方法 ， 设 置 其 他 上 标 。 








ng" 
[21 <tbody> 
22 tr 
上 IE td>1、 a <em>x</em> 动 器 em>x< A +1)= ee 
/u> ， 它 的 二 次 项 系数 是 < /u> 








25 tr 
2 NT een fei ong/ EE 
</em> a me, je x</em> 2=4 Eh cen emu 
ju 时 ,方程 为 元 次 添加 see 


</u> >, 方 程 为 一 元 一 
/tr 


tr 
29 td>3\ 方程 2<em>x</em>2+3<em>x</em>=6 的 恨 是 cu> "| 


& 图 3-65 ,设置 上 标 


切换 到 【设计 】 视 图 中 ， 选 择 表格 第 4 行 ， 
执行 【插入 】1【 表格】 命令 , 插入 4 行 2 
列 的 嵌 套 表格 ， 如 图 3-66 所 示 。 






































和 图 3-66 ,插入 4 行 2 列 的 谋 套 表格 





在 嵌 套 表格 中 , 输入 相应 的 数学 试题 ， 并 设 
置 其 字体 格式 ， 如 图 3-67 所 示 。 



























































和 图 3-67 ,输入 试题 并 设置 字体 格式 


在 表格 中 剩余 行 中 , 输入 相对 应 的 文本 。 选 
择 最 后 一 行 ， 将 【 高 度 】 设 置 为 “41”， 如 
图 3-68 所 示 。 使 用 同样 方法 ， 设 置 其 他 行 
的 高 度 。 






























































和 图 3-68 ,设置 行 高 


选择 第 1、3 和 5 行 , 在 【属性 】 面 板 中 ， 
单 击 【 加 粗 】 按钮 ， 将 【 背景 颜色 】 设置 为 
“#B3D9FF”， 如 图 3-69 所 示 。 














在 了 图 3-69 设置 属性 


选择 第 2 行 中 的 府 套 表格 , 在 【 属性 ] 面板 
中 将 【背景 颜色 】 设置 为 “#FFFFF”， 如 
图 3-70 所 示 。 使 用 同样 方法 ,设置 其 他 单 
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和 图 3-70 ,设置 背景 颜色 


将 光标 定位 在 表格 左 侧 , 按 下 Enter 键 换行 。 
然后 ,在 第 1 行 中 输入 标题 文本 ,如 图 3-71 
所 示 。 

选择 标题 文本 , 设置 居中 对 齐 格式 , 并 执行 
【格式 ] |【 段落 格式 ] |【 标题 2 】 命 令 ， 如 
图 3-72 所 示 。 


和 图 3-71 输入 标题 文本 
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和 | 图 3-72 ,设置 标题 格式 





一 、 填 空 题 


1.【 外 观 (CSS)】 届 性 的 作用 是 通过 可 视 





化 界面 为 网 页 创建 样式 规则 ， 定 义 网 页 
中 的 、 以 及 边 距 等 基本 属性 。 

2. Dreamweaver 附带 了 ， 以 帮 
助 用 户 设计 站 点 页 面 。 


3. 在 保存 文档 时 ， 用 户 可 以 通过 按 下 
组 合 键 , 快速 打开 【另存 为 】 对 话 框 ， 
对 文件 进行 保存 操作 。 
4. HTML 是 制作 网 页 的 一 种 规范 ， 包 括 
文件 头 和 文件 体 两 部 分 
内 容 。 





5. 在 Dreamweaver 中 ,用 户 可 通过 


中 各 种 文件 头 标签 来 定义 网 页 的 标题 ， 为 网 页 添 
加 搜索 关键 字 和 描述 信息 等 ， 以 方便 用 户 搜索 和 
收录 网 页 。 

6. 利用 Dreamweaver 中 的 ， 可 以 


从 “获取 ”或 “上 传 ” 等 操作 中 排除 某 些 文件 、 
文件 夹 和 文件 类 型 ， 以 方便 用 户 有 选择 性 地 获取 
或 上 传 文件 。 

二 、 选 择 题 


1. 被 遮盖 的 文件 和 文件 夹 以 _ 进行 
标注 。 
A. 删除 线 
B. 红色 和 斜 线 
C. 红色 删除 线 
D. 斜 线 
2. 如 果 要 对 远程 服务 器 中 的 站 点 文件 进行 
存 回 和 取出 操作 , 则 必须 先 将 ”与 远程 服务 器 
相关 联 ， 然 后 才能 使 用 该 功能 。 
A. 本 地 站 点 
B. 本 地 文件 夹 
C. 根 文件 
D. 站 点 文件 


3. 用 户 也 可 以 通过 ” 组合 键 , 快速 打开 
【打开 】 对 话 框 ， 选 择 所 需 打 开 的 文件 。 
A. Ctrl+A 
B. Ctrl+C 
C. CtltO 
D. Ctlt+W 
4. 用 户 也 可 以 通过 组 合 键 , 来 关闭 当 
前 网 页 文档 ， 通 过 Ctrl+ShifttW 组 合 键 ， 关 闭 所 
有 的 网 页 文件 。 
A. Ctrl+A 
B. Ctlt+W 
C. Ctrl+O 
D. CtrlHX 
5. 在 Dreamweaver 中 ， 用 户 可 通过 
中 各 种 文件 头 标签 来 定义 网 页 的 标题 ， 为 网 页 添 
加 搜索 关键 字 和 描述 信息 等 。 
A. body 
B. head 
C. 视 口 
D. 关键 字 
6. 用 户 也 可 以 按键 , 或 单 击 【 选 项 】 
按钮 ， 执 行 【 文 件 】|【 重 命名 】 命令 ， 来 重 命名 
文件 或 文件 夹 。 
A. Ctrl+A 
B. Fl12 
CB 
D. Ctrl+F12 





三 、 问 答题 


1. 如何 创建 启动 器 模板 文档 ? 

2. 如 何 设置 文件 头 标签 ? 

3. 如 何在 【文件 】 面 板 中 查找 最 新 修改 的 
文件 ? 

4. 如 何 遮 六 文件 夹 ? 

四 、 上 机 练习 

1. 设置 背景 图 像 

在 本 练习 中 ， 将 使 用 【页 面 属性 】 对 话 框 ， 
来 设置 网 页 的 图 像 背 景 ， 如 图 3-73 所 示 。 首 先 ， 
新 建 一 个 空白 文档 ， 在 【属性 】 面 板 中 单 击 【 页 


面 属性 】 按 钮 。 其 次 ， 在 弹出 的 【页 面 属性 】 对 
话 框 中 的 【外 观 (CSS)】 文本 框 中 ， 单 击 【 背 景 
图 像 】 选 项 后 面 的 【浏览 】 按 钮 。 再 次 ， 在 弹出 
的 【选择 图 像 源 文件 】 对 话 框 中 , 选择 图 像 文件 ， 
并 单 击 【 确 定 】 按 钮 。 最 后 ， 在 【页 面 属性 】 对 
话 框 中 ， 将 【重复 】 设 置 为 repeat， 单 击 【 确 定 】 
按钮 即 可 。 
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和 图 3-73 设置 背景 图 像 
2. 创建 XML 文档 


在 本 练习 中 ， 将 创建 一 个 XML 网 页 文档 ， 
如 图 3-74 所 示 。 首 先 ， 执行 【 文 件 】| 【新 建 】 
命令 , 在 弹出 的 【新 建文 档 】 对 话 框 中 选择 XML 
选项 ， 并 单 击 【 创 建 】 按 钮 ， 创 建 一 个 XML 文 
档 。 然 后 ， 在 XML 文档 中 输入 数据 内 容 ， 用 以 
显示 目录 的 级 别 。 最 后 ， 执 行 【 文 件 】| 【保存 】 
命令 ， 在 弹出 的 【另存 为 】 对 话 框 中 ， 设 置 保存 
位 置 和 名 称 ， 单 击 【 保 存 】 按 钮 即 可 。 
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Lank /tareet> 
/class> 
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人 《了 图 3-74 XML 文档 
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网 页 基础 元 素 


4.1 创建 网 页 文本 





4 | | jjALANUI YX 小 | 








1. 直接 输入 


直接 输入 是 创建 网 页 文本 最 站 加 间 茶 是 汉族 传统 名 茶 ,著名 绿 荣 之 一 。 证 本 并 村 带 ， 已 有 一 和 








a 全 和风 ， 龙 和 半生 和 绿 本 
常用 的 方法 ， 用 户 可 以 在 【代码 ” 导 香 孝 、 味 甘 、 形 美 四 绝 的 特点 。 龙 并 茶 得 名 于 龙 间 。 a 
区 上 西北 状 的 龙 并 茶 村 。 龙 并 茶 因 其 产地 不 同 ， 分 为 西湖 龙 并 、 大 佛 龙 并 、 钱塘 龙 并 、 
和 设计 】 视 图 和 【设计 】 视 图 中 | 导 越 州 龙 并 四 种 ， 辽西 源 区 16 和 平方 公 恒 的 荣 叶 吕 作 认 涡 关外， 其 它 产地 产 的 


输入 文本 内 容 ， 如 图 4-1 所 示 。 








由 俗称 为 浙江 龙 并 茶 。 
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[了 图 4-1 ,输入 网 页 文本 


2. 粘贴 外 部 文本 


在 编辑 网 页 内 容 时 ， 对 于 篇 幅 比 较 长 的 文本 ， 则 可 以 直接 将 外 部 文本 复制 到 【设计 】 
视图 中 。 例 如 ， 在 某 个 网 页 中 复制 一 段 文 本 ， 切 换 到 Dreamweaver 文档 中 ， 执 行 【 粘 贴 】 
命令 或 按 下 CtrltV 组 合 键 ， 即 可 粘贴 该 文本 。 

但 是 在 粘贴 外 部 文本 时 , 普通 的 粘贴 方法 会 连同 外 部 文本 的 格式 设置 一 起 粘贴 过 来 。 
此 时 ， 用 户 可 以 复制 外 部 文本 之 后 ， 执 行 【编辑 】|【 选 择 性 粘贴 】 命 令 ， 在 弹出 的 【 选 
择 性 粘贴 】 对 话 框 中 ， 选 择 所 需 粘贴 的 
文本 样式 ， 并 单 击 【确定 】 按 钮 ， 如 图 





入 = 
4-2 所 示 。 Ott 
i ee a 带 结 榴 文本 《 段 车、 列表、 表格 等 ) (s) 

在 【选择 性 粘贴 】 对 话 框 中 ， 主 要 | | OR 以太 必 式 (村 、 和 和 (3) Ra 
包括 下 列 选 项 口 于 构 和 文本 以 及 全 部 格式 ( 粗 体 、 生 体 、 样 式 ) (1) 
2 保留 按 行 符 (t) 
口 仅 文本 仅 粘 贴 文本 字符 , 不 保 | 加 wa RE 
留任 何 字体 格式 。 口 将 智能 引 呈 转换 为 直 引号 (0) 


口 带 结构 的 文本 ”粘贴 包含 段落 、 人 
列表 和 表格 等 结构 的 文本 。 eg 、 
[了 图 4-2 【选择 性 粘贴 】 对 话 框 
D 带 结构 的 文本 以 及 基本 格式 二“ 
粘贴 包含 段落 、 列 表 、 表 格 以 及 粗 体 和 斜体 的 文本 。 
口 带 结构 的 文本 以 及 全 部 格式 ”粘贴 包含 段落 、 列 表 、 表 格 以 及 粗 体 、 斜 体 和 色彩 
等 所 有 样式 的 文本 . 
口 保留 换行 符 ” 启 用 该 复 选 框 ， 在 粘贴 文本 时 将 自动 添加 换行 符号 。 
口 清理 Word 段落 间距 启用 该 复 选 框 , 在 复制 Word 文 本 后 将 自动 清除 段落 间距 。 
口 将 智能 引号 转换 为 直 引 号 ”启用 该 复 选 框 , 在 粘贴 文本 时 将 自动 将 智能 引号 转换 
为 直 引 号 。 
口 粘贴 首选 参数 ” 单 击 该 按钮 , 可 以 在 弹出 的 【首选 项 】 对 话 框 中 设置 粘贴 首选 项 。 
3. 导入 外 部 文本 


Dreamweaver 为 用 户 提 供 了 导入 外 部 文本 功能 ， 使 用 该 功能 可 以 导入 Word 文档 。 
在 【代码 和 设计 】 视 图 中 , 将 光标 定位 到 导入 文本 的 位 置 , 执行 【文件 人 导入 】 代 Word 
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文档 】 命 令 ， 如 图 4-3 所 示 。 选 择 要 导入 
的 Word 文档 , 即 可 将 文档 中 的 内 容 导 入 虑 
到 网 页 文档 中 。 


当 用 户 输入 、 粘 贴 或 导入 文本 到 网 
页 文档 中 之 后 ， 还 需要 在 【属性 】 面 板 
中 设置 文本 的 HIML 和 CSS 属性 。 


1. 设置 HMTL 属性 


在 【属性 】 面 板 中 激活 HTML 选项 
卡 ， 将 各 项 属性 设置 应 用 到 页 面 正文 的 
HTML 代码 中 ， 如 图 4-4 所 示 。 








| BI 滞后 二 
| 






























和 图 4-4_。【 属 性 】 面 板 


在 HTML 选项 卡 中 ， 主 要 包括 下 列 15 种 属性 : 

口 格式 ”用 于 设置 文本 的 基本 格式 ， 可 选择 无 格式 文本 、 段 落 或 各 种 标题 文本 。 

口 类 为 CSS 类 ， 用 于 定义 当前 文档 所 应 用 的 CSS 类 名 称 。 

口 粗 体 用 于 定义 以 HTML 的 方式 将 文本 加 粗 。 

口 斜体 用 于 定义 以 HIML 的 方式 使 文本 倾 儿 。 

口 项 目 列表 为 普通 文本 或 标题 、 段 落 文本 应 用 项 目 列表 。 

口 编号 列表 为 普通 文本 或 标题 、 段 落 文 本 应 用 编号 列表 。 

口 删除 内 缩 区 块 ”将 选择 的 文本 向 左 侧 推移 一 个 制 表 位 。 

口 内 缩 区 块 ” 将 选择 的 文本 向 右 侧 推移 一 个 制 表 位 。 

口 标题 ”当选 择 的 文本 为 超 链接 时 , 定义 当 和 鼠标 滑 过 该 段 文本 时 显示 的 工具 提示 信息 。 

DID 定义 当前 选择 的 文本 所 属 的 标签 ID 属性 , 从 而 通过 脚本 或 CSS 样式 表 对 其 
进行 调用 ， 添 加 行为 或 定义 样式 。 

口 链接 ”创建 所 选 文本 的 超 文本 链接 。 

口 目标 ”指定 将 链接 文档 加 载 到 哪个 框架 或 窗口 。 

口 文档 标题 ”用 于 显示 新 建文 档 的 标题 。 

口 页 面 属性 单 击 该 按钮 ， 可 打开 【页 面 属 性 〗】 对 话 框 ， 定 义 整 个 文档 的 属性 。 

口 列表 项 目 当选 择 的 文本 为 项 目 列表 或 编号 列表 时 ， 可 通过 该 按钮 定义 列表 的 样式 。 


2. 设置 CSS 属性 
在 【属性 】 面 板 中 激活 CSS 选项 卡 , 将 各 项 属性 设置 写 入 文档 头 或 单独 的 样式 表 中 ， 
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如 图 4-5 所 示 。 











在 CSS 选项 卡 中 ， 主 要 包括 下 列 一 些 属性 

口 目标 规则 显示 在 CSS 属性 检查 器 中 正在 编辑 的 规则 ， 用 户 也 可 以 单 击 其 下 拉 

按钮 ， 在 弹出 的 下 拉 列 表 中 创建 新 的 CSS 规则 、 新 的 内 联 样 式 或 将 现 有 类 应 用 

于 所 选 文本 。 

口 编辑 规则 单 击 该 按钮 ， 可 在 打开 的 【CSS 设计 器 】 面 板 中 编辑 CSS 规则 。 

口 CSS Designer 单 击 该 按钮 ， 可 打开 【CSS 设计 器 】〗 面 板 。 

口 字体 用 于 设置 目标 规则 中 的 字体 样式 。 

口 大 小 ”用 于 设置 目标 规则 中 的 字体 大 小 。 

口 文本 颜色 ”用 于 设置 目标 规则 中 的 字体 颜色 。 

口 对 齐 方式 用 于 设置 目标 规则 中 文本 的 对 齐 属 性 ， 包 括 左 对 齐 、 右 对 齐 、 居 中 对 
齐 和 两 端 对 齐 4 种 样式 。 

口 文档 标题 ”用 于 显示 新 建文 档 的 标题 。 

口 页 面 属性 单 击 该 按钮 ， 可 打开 【页 面 属 性 〗】 对 话 框 ， 定 义 整个 文档 的 属性 。 





在 网 页 中 除了 可 以 插入 普通 文本 之 外 ， 还 可 以 插入 一 些 比 较 特殊 的 文本 。 例 如 ， 插 
入 特殊 符号 、 水 平 线 、 日 期 等 。 


1， 插 入 特殊 符号 


选择 插入 位 置 ， 执 行 【插入 】IHTMLI【 字 符 】 命 令 ， 在 展开 的 级 联 菜单 中 选择 相应 
的 字符 样式 即 可 ， 如 图 4-6 所 示 。 
es 








和 图 4-6 ,插入 字符 





Dreamweaver 允许 为 网 页 文档 插入 11 种 基本 的 特殊 符号 , 其 每 种 特殊 符号 的 具体 作 
用 如 表 4-1 所 示 。 








名 称 显示 (作用 ) 
换行 符 两 段 间距 较 小 
左 引 号 加 

右 引 号 

破 折线 

短 破 折线 - 

英镑 符号 攻 

欧元 符号 € 

日 元 符号 圣 

版 权 @ 

注册 商标 ® 

商标 I™ 
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执行 【插入 】IHTMLI 【字符 】1 【其 他 字符 ] 命 J] 5 
令 ， 选 择 所 需 插入 的 符号 ， 单 击 【确定 】 按 钮 | .G3 | :24 人 
即 可 ， 如 图 4-7 所 示 。 Al BAIA Ed | EE | 

- ijili|lN|ol6lololololv 

S Vvos|alalila|lalale 

E3 S| el él el elilililrilaleo 

A 6|6|5|5|*|el ilalalaly 
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2. 插入 水 平 线 


Dreamweaver 还 为 用 户 提 
供 了 插入 水 平 线 功 能 ， 运 用 该 
功能 可 以 方便 地 插入 水 平 线 。 

首先 ， 将 光标 定位 在 需要 
插入 水 平 线 的 位 置 。 然 后 ， 执 
行 【插入 】IHTMLI【 水 平 线 】 
命令 ， 即 可 在 光标 定位 处 插入 
一 条 水 平 线 ， 如 图 4-8 所 示 。 
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和 图 4-8_, 插 入 水 平 线 








插入 水 平 线 之 后 ， 在 【 属性】 面板 中 将 会 显示 水 平 线 的 各 种 属性 选项 ， 以 方便 用 户 
可 以 根据 实际 使 用 来 制作 一 些 相对 优美 的 水 平 线 ， 如 图 4-9 所 示 。 









































屋 性 

让 水? 线 。 亮 全 | | 像素 “] 对 齐 (从 居中 对 齐 v|] clss | 无 v 
SEE 高 0 回 阴影 G) 

和 图 4-9 设置 属性 


在 【属性 】 面 板 中 ， 主 要 包括 下 列 4 种 属性 选项 : 

口 水 平 线 用 于 设置 水 平 线 的 ID。 

口 宽 /高 用 于 设置 水 平 线 的 宽度 和 高 度 ， 单 位 可 以 是 像素 或 百分比 。 

口 对 齐 ”用 于 设置 水 平 线 的 对 齐 方式 , 包括 【默认 .【 左 对 齐 、【 居 中 对 齐 】 和 【 右 
对 齐 】 

口 阴影 ”启用 该 复 选 框 ， 可 为 水 平 线 添加 阴影 效果 。 


ra aaaauaasuuou mas | 


3. 插入 日 期 


用 户 不 仅 可 以 在 网 页 中 插入 水 平 线 
和 特殊 符号 ， 而 且 还 可 以 插入 当前 时 间 和 
日 期 。 
执行 【插入 】IHTMLI【 日 期 】 命 令 ， 
在 弹出 的 【插入 日 期 】 对 话 框 中 设置 日 期 
和 时 间 选 项 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 
图 4-10 所 示 。 
在 【插入 日 期 】 对 话 框 中 ， 主 要 包括 
下 列 4 种 选项 : 
口 星期 格式 ”用 于 设置 中 文 或 英文 
样式 的 星期 显示 格式 ， 也 可 以 设置 为 不 显示 样式 。 
口 日 期 格式 ”用 于 设置 日 期 显示 格式 。 
口 时 间 格 式 ” 用 于 设置 时 间 显示 格式 。 
口 储存 时 自动 更 新 ”启用 该 复 选 框 , 可 以 在 每 次 保存 网 页 文档 时 都 会 自动 更 新 插入 
的 日 期 时 间 。 





















星期 格式 : | [未 要 量 期 [| 区 定 


日 期 格式 : [dd 取消 
1974 年 3 月 ?日 


03/07/1974 图 帮助 









































4-10 。【 插 入 日 期 】 对 话 框 





设置 文档 列表 





列表 是 网 页 中 常见 的 一 种 文本 排列 方式 ， 包 括 项 目 列表 和 项 目 编号 两 种 样式 。 通 过 
设置 文档 列表 ， 不 仅 可 以 美化 页 面 ， 而 且 还 可 以 突显 出 文本 的 层次 性 。 





ge--4.2.1 应 用 项 目 列表 与 编号 --， 


在 Dreamweaver 中 , 除了 可 以 通过 HTML 语言 来 创建 项 目 列表 与 编号 之 外 , 还 可 以 
使 用 【设计 】 视 图 ， 以 直观 表达 的 站 
方法 来 创建 项 目 列表 和 编号 。 ET 









































3 
1， 设 置 项 目 列表 与 编号 ee 
PE “TY 
在 网 页 中 , 选择 所 需 创建 项 目 | sm 
列表 与 编号 的 文本 。 然 后 , 在 【 插 | ER 四 晒 
入 】 面 板 中 选择 HTML 类 别 , 在 上 国 了 @# 二 
其 列表 中 单 击 【项 目 列表 】 按钮 ， | EY 
即 可 为 所 选 文本 添加 项 目 列表 ,如 | 一 一 
图 4-11 所 示 。 1 
在 网 页 中 , 选择 所 和 需 创建 项 目 甘 : ， 








列表 与 编号 的 文本 。 然 后 ,在 【 插 图 4 “应 用 项 目 列表 
入 】 面 板 中 选择 HIML 类 别 , 在 

其 列表 中 单 击 【 编 号 列表 】 按 钮 ， 
即 可 为 所 选 文本 添加 编号 ， 如 图 
4-12 所 示 。 








用 户 也 可 以 直接 单 击 【项 目 列表 】 或 
【编号 列表 】〗 按 钮 ， 输 入 完 一 个 列表 
项 之 后 ， 按 下 Enter 键 ， 系 统 会 自动 显 
示 下 一 个 列表 项 。 完 成 输入 之 后 ， 连 
续 按 两 次 Enter 键 ， 结 束 列表 的 输入 。 


网 
页 
设 
计 
与 
网 
站 
组 
建 
标 
准 
教 
程 
S 
加 
S 
版 














除 此 之 外 , 还 可 以 在 网 页 中 选 
择 所 需 创建 项 目 列表 与 编号 的 文 生 | 图 4-12 .应 用 编号 列表 
本 ， 然 后， 在 【属性 】 面 板 中 的 
HTML 选项 卡 中 , 单 击 【项 目 列 表 】 
或 【编号 列表 】 按 钮 ， 即 可 为 所 选 
文本 添加 项 目 列表 或 编号 列表 , 如 
图 4-13 所 示 。 











Dreamweaver 只 能 以 段落 文本 转换 列 
表 。 在 一 个 段落 中 的 多 行内 容 在 转 
换 列表 时 只 会 转换 到 同一 个 列表 项 
目 中 。 














4-13 通过 【属性 】 面 板 创建 





2. 设置 列表 属性 




















创建 列表 后 ， 用 户 还 可 以 根据 设计 需 | 。 难 xm: 攻 EL [| 
求 设置 列表 的 一 些 常规 属性 。 选 择 包含 列 和 四 二 
开始 计数 (C); (数字 ) 训 助 














表 的 文本 ， 在 【属性 】 面 板 中 单 击 【列表 | sm 
项 目 】 按 钮 ， 即 可 在 弹出 的 【列表 属性 】 | 5f<w IE 
对 话 框 中 设置 列表 的 基本 属性 ， 如 图 4-14 | sa 2 
所 示 。 
在 【列表 属性 】 对 话 框 中 ， 主 要 包括 全 了 图 4-14 _。[ 列 表 属性 】 对 话 杠 
下 列 5 种 选项 : 
口 列表 类 型 ”用 于 指定 列表 的 类 型 ， 包 括 【 项 目 列表 下 【编号 列表 了 【目录 列表 ] 
和 【菜单 列表 】4 种 类 型 。 
口 样式 ”用 于 指定 编号 列表 或 项 目 列表 的 编号 或 项 目 符号 的 样式 。 
口 开始 计数 ”用 于 设置 编号 列表 中 第 一 个 项 目的 值 。 
口 新 建 样式 “为 所 选 列表 项 目 指定 样式 。 
口 重 设计 数 ”设置 用 来 从 其 开始 为 列表 项 目 编号 的 特定 数字 。 























棋 套 项 目 列表 是 在 一 个 项 目 列表 中 嵌入 一 个 或 多 个 项 目 列表 ， 以 形成 上 下 级 关系 。 
一 般 情况 下 ， 用 户 可 通过 下 列 两 种 方法 来 创建 嵌 套 项 目 列表 。 


1. 列表 项 法 


首先 , 为 所 选 文本 添加 项 目 列 
表 。 然 后 ， 在 【 拆 分 】 视 图 中 的 左 
侧 【 代 码 】 视 图 中 ,将 光标 定位 在 
<ul></ul> 标 签 内 所 需 显示 或 插入 
根 套 列表 的 位 置 ， 并 在 【插入 ]】 面 
板 中 单 击 【编号 列表 】 按 钮 ， 如 图 
4-15 所 示 。 

最 后 , 在 【插入 】 面 板 中 单 击 
【列表 项 】 按 钮 ， 添 加 文本 内 容 
后 即 可 实现 嵌 套 列表 ， 如 图 4-16 
所 示 。 在 了 图 4-15 .应 用 编号 列表 


2. 缩 进 法 


首先 ， 在 【设计 】 视 图 中 ， 为 所 选 文本 添加 项 目 列表 。 然 后 ， 选 择 需要 人 嵌 套 列表 的 
文本 ， 在 【属性 】 面 板 中 单 击 【 缩 进 】 按 钮 即 可 ， 如 图 4-17 所 示 。 


2 <html> 
3 <head> 
3 <meta charset="utf-8"> 


5 <title> 无 标题 文档 </title> 
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对 于 网 页 中 的 文本 ， 除 了 通过 【属性 】 面 板 设置 基本 格式 之 外 ， 还 可 以 通过 HTML 
样式 、 段 落 样式 等 功能 来 设置 文本 格式 ， 从 而 使 页 面 内 容 更 加 美观 ， 更 具有 层次 感 。 


HTML 样式 是 HIML 4 引入 的 ， 它 是 一 种 新 的 首选 的 改变 HTML 元 素 样式 的 方式 。 
通过 HTML 样式 ， 可 以 通过 使 用 style 属性 直接 将 样式 添加 到 HTML 元 素 ， 或 者 间接 地 
在 独立 的 样式 表 中 (CSS 文件 ) 
进行 定义 。 

1. 下 画 线 





| doc' 
<u><hu> 下 夯 线 标签 告诉 浏 国 : : 
览 器 把 其 加 <u> 标 签 的 文本 加 下 
夯 线 样式 呈现 给 用 户 。 对 于 所 有 
浏览 器 来 说 ， 这 意味 着 要 把 这 有 段 
文字 以 加 下 画 线 样 式 方式 显示 。 
选择 网 页 文本 , 执行 【格式 】 
ICHTML 样式 ] 代 下面 线 】 命令， 
即 可 为 所 选 文本 添加 下 画 线 样 | 
式 ， 如 图 4-18 所 示 。 | 


2. 删除 线 和 | 图 4-18 设置 下 画 线 


<s></s> 标 签 为 删除 线 标签 , 告诉 浏览 器 把 其 加 <s> 标 签 的 文本 文字 加 删除 线 样式 ( 文 
字 中 间 一 道 横 线 ) 呈现 给 用 户 。 
选择 网 页 文本 ， 执 行 【 格 式 】| 【HTML 样式 】| 【删除 线 】 命 令 ， 即 可 为 所 选 文本 添 














加 删除 线 样式 ， 如 图 4-19 所 示 。 
3. 粗 体 


<strong> 标 签 用 于 强调 文本 ， 但 它 强调 的 程度 更 强 一 些 。 通 常 是 用 加 粗 的 字体 〈 相 
对 于 斜体 ) 来 显示 其 中 的 内 容 。 

选择 网 页 文本 ,执行 【格式 】| 【HTML 样式 】|【 粗 体 】 命 令 ， 即 可 为 所 选 文 本 添加 
粗 体 样式 ， 如 图 4-20 所 示 。 






和 图 4-19 设置 删除 线 


4. 斜体 


<em></em> 标 签 告诉 浏览 器 把 
其 中 的 文本 表示 为 强调 的 内 容 。 对 
于 所 有 浏览 器 来 说 ， 这 意味 着 要 把 
这 段 文 字 用 斜体 方式 呈现 给 大 家 ， 
这 个 与 html 斜体 效果 相同 。 

选择 网 页 文本 ,执行 【格式 】| 
【HTML 样式 】|【 和 斜体 】 命 令 ， 即 
可 为 所 选 文本 添加 斜体 样式 ， 如 图 
4-21 所 示 。 


Dreamweaver 中 段落 样式 只 设 ”在 了 图 4-21 .设置 斜体 格式 
置 标 题 内 容 ， 包 括 “ 标 题 1”“ 标 题 2”“ 标 题 3”…“ 标 题 6” 等 样式 ， 既 可 以 应 用 于 文 
本 段落 ， 又 可 以 应 用 于 标题 。 


1. 设置 段落 
将 光标 定位 在 空白 网 页 中 ,执行 【格式 】 代 段落 格式 】 代 段落 】 命 令 ， 系 统 会 在 【 代 
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码 】 编 辑 器 中 添加 一 个 <p> 标 签 ， 








如 图 4-22 所 示 。 











另外 , 选择 网 页 文本 , 执行 [ 格 
式 】|【 段 落 格式 】|【 段 落 】 命 令 ， 
即 可 为 所 选择 内 容 添加 段落 标签 ， 
如 图 4-23 所 示 。 

2. 设置 标题 

标题 是 文章 的 眉目 。 各 类 文章 
的 标题 ， 样 式 繁多 ， 但 无 论 是 何 种 
形式 , 总 要 以 全 部 或 不 同 的 侧面 体 
现 作者 的 写作 意图 、 文 章 的 主旨 。 
标题 一 般 分 为 总 标题 、 副 标题 、 分 
标题 等 几 种 。 

在 Dreamweaver 中 , 标题 可 以 
分 为 6 个 级 别 , 不 同 级 别 的 标题 的 
格式 不 相同 ， 而 “标题 1” 为 最 大 
字号 ,“ 标 题 6” 为 最 小 字号 。 选 择 
网 页 文本 ， 执 行 【格式 】 代 段落 格 
式 】| 代 标题 1】 命令， 即 可 为 所 选 
择 内 容 添加 【标题 1】 样式， 如 图 
4-24 所 示 。 且 了 图 4-23_。 为 内 容 设置 段落 格式 





和 图 4-22 .设置 段落 格式 











置 为 其 他 的 标题 ， 如 “标题 2”“ 标 
题 3”“ 标 题 4” 等 。 


3. 编排 格式 


<pre> 标 签 可 定义 预 格式 化 的 文 | 
本 ， 被 包围 在 <pre> 标 签 中 的 文本 通 
常会 保留 空格 和 换行 符 , 而 文本 也 会 
呈现 为 等 宽 字 体 ，<pre> 标 签 的 一 个 
常见 应 用 就 是 用 来 表示 计算 机 的 源 
代码 。 所] 图 4-24 .设置 标题 格式 

在 代码 中 ， 可 以 导致 段落 断 开 的 标签 (如 标题 、<p> 和 <address> 标 签 ) 绝 不 能 包含 
在 <pre> 标 签 所 定义 的 块 里 。 尽管 有 些 浏览 器 会 把 段落 结束 标签 解释 为 换行 , 但 是 这 种 行 
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为 在 所 有 浏览 器 上 并 不 都 是 一 样 的 。 
<pre> 标 签 中 允许 的 文本 可 以 包括 物理 样式 和 基于 内 容 的 样式 变化 , 还 有 链接 、 图像 
和 水 平分 隔 线 。 当 把 其 他 标签 ( 比 [cee SEEERREFS 


5 ”<title> 无 标题 文档 </tit 








如 <a> 标 签 》 放 到 <pre> 标 签 块 中 | 5 “ess 

时 , 就 像 放 在 HIMLAXHTML 文档 | 

的 其 他 部 分 中 一 样 即 可 。 1 atienc"juztt vs 龙 拓 是 汉族 传统 名 森 ， 属 于 绿茶 , 位 列 中 国 二 大 
例如 , 选择 网 页 文本 , 执行 [ 格 “| 上 和 的 生生 和 和 册 小 基 和 多 和 了 家 人， 吕 

式 】| 【段落 格式 】| 【已 编排 格式 】 | 。 -人 和， 和 和 和 四 

命令 。 然 后 在 <pre> 标 签 中 ， 对 文 | 守 和 入 人 人  ， 

本 进行 换行 ,并 插入 空格 ， 以 测试 . 

显示 效果 ， 如 图 4-25 所 示 。 在 图 4-25 设置 编排 格式 


调整 后 的 文本 格式 ， 可 以 在 浏览 器 中 浏览 网 页 内 容 ， 以 查看 最 新 效果 。 
4.4 创建 网 页 图 像 





图 像 是 网 页 中 重要 的 多 媒体 元 素 之 一 ， 可 以 弥补 纯 文本 的 单调 性 ， 增 加 网 页 的 多 彩 
性 。 但 是 ， 过 多 的 图 像 会 导致 网 页 的 打开 速度 变 慢 ， 因 此 在 设计 网 页 时 还 需要 考虑 图 像 
的 数目 、 大 小 和 图 形 格式 等 因素 。 


网 页 对 图 像 格式 并 没有 太 严 格 的 限制 ， 但 由 于 GIF 和 JPEG 格式 的 图 片 文 件 较 小 ， 
并 且 许 多 浏览 器 完全 支持 ， 因 此 它们 是 网 页 制作 中 最 为 常用 的 文件 格式 。 一 般 情 况 下 ， 
网 页 中 的 图 像 格式 包括 下 列 最 常见 的 6 种 。 

1. JPEG 

JPEG(Joint Photographic Experts Group ) 是 Web 上 仅 次 于 GIF 的 常用 图 像 格式 ,JPEG 
是 一 种 压缩 得 非常 紧凑 的 格式 ,专门 用 于 不 含 大 色 块 的 图 像 。JPEG 格式 的 图 像 有 一 定 的 
失真 度 ， 但 是 在 正常 的 损失 下 肉眼 分 辨 不 出 JPEG 和 GIF 图 像 的 差别 。 而 JPEG 文件 只 
有 GIF 文件 的 1/4 大 小 。JPEG 对 图 标 之 类 的 含 大 色 块 的 图 像 支持 度 不 大 , 不 支持 透明 图 
和 动态 图 。 

2. PNG 


PNG (Portable Network Graphic) 格式 是 Web 图 像 中 最 通用 的 格式 。 它 是 一 种 无 损 
压缩 格式 ， 但 是 如 果 没 有 插件 支持 ， 有 的 浏览 器 可 能 不 支持 这 种 格式 。PNG 格式 最 多 可 
以 支持 32 位 颜色 ， 但 是 不 支持 动画 图 


3. GIF 


GIF (Graphics Interchange Format) 是 Web 上 最 常用 的 图 像 格式 ， 它 可 以 用 来 存储 
各 种 图 像 文 件 。 特 别 适 用 于 存储 线条 、 图 标 和 计算 机 生成 的 图 像 、 卡 通 和 其 他 有 大 色 块 
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的 图 像 。 

GIF 格式 的 文件 容量 非常 小 ， 形 成 的 是 一 种 压缩 的 8 位 图 像 文 件 ， 所 以 最 多 只 支持 
256 种 不 同 的 颜色 。GIF 支持 动态 图 、 透 明 图 和 交织 图 。 

4. BMP 


BMP (Windows Bitmap) 格式 使 用 的 是 索引 色彩 ， 它 的 图 像 具有 极其 丰富 的 色彩 ， 
可 以 使 用 16M 色彩 渲染 图 像 。 此 格式 一 般 在 多 媒体 演示 和 视频 输出 等 情况 下 使 用 。 


5: TIFF 


TIFF (Tag Image File Format) 格式 是 对 色彩 通道 图 像 来 说 最 有 用 的 格式 ， 支 持 24 
个 通道 ， 能 存储 多 于 4 个 通道 。TIFF 格式 的 结果 要 比 其 他 格式 更 大 、 更 复杂 ， 它 非常 适 
合 于 印刷 和 输出 。 


6. TGA 


TGA (Targa) 格式 与 TIFF 格式 相同 ， 都 可 以 用 来 处 理 高 质量 的 色彩 通道 图 形 。 另 
外 ，PDD、PSD 格式 也 是 存储 包含 通道 的 RGB 图像 的 最 常见 的 文件 格式 。 


在 Dreamweaver 中 ,除了 可 以 
插入 一 些 普通 的 图 像 文件 之 外 , 还 
可 以 插入 鼠标 经 过 图 像 、Fireworks 
HTML 等 类 型 的 图 像 。 


1， 插入 普通 图 像 
将 光标 放置 在 所 需 插入 图 像 上 


的 位 置 ， 执 行 【插入 】|【 图 像 】 


命令 ; 或 者 在 【插入 】 面板 中 单 击 rw， 
Image 按钮 ， 如 图 4-26 所 示 。 人 了 图 4-26 .插入 图 像 


然后 ， 在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 ， 选 择 图 像 文件 ， 单 击 【确定 】 按 钮 
即 可 ， 如 图 4-27 所 示 。 


2. 插入 鼠标 经 过 图 像 AT 
1ipg 单 击 jpg;"j 
选择 图 像 插 入 位 置 , 执行 [插入 JIHTML| Et ED 一 一 一 


二 
【 鼠标 经 过 图 像 】 命 令 , 在 弹出 的 【插入 鼠标 - 
经 过 图 像 】 对 话 框 中 ， 设 置 各 选项 即 可 ， 如 “CI 图 4-27 选择 图 像 文件 















































图 4-28 所 示 。 




































































在 【插入 鼠标 经 过 图 像 】 对 话 框 中 ， Pa 
图 像 名 称 : |Inagel 
主要 包括 下 列 6 种 选项 : | 看 末 

口 图 像 名 称 ”用 于 设置 鼠标 经 过 图 像 Ri Wy | 
的 名 称 ， 不 能 与 同 页 面 其 他 网 页 对 ea 
象 的 名 称 相同 。 

口 原始 图 像 ”用 于 设置 页 面 加 载 时 | 车 办 EURL Ee 
显示 的 图 像 。 

口 鼠标 经 过 图 像 ”用 于 设置 鼠标 经 
过 时 显示 的 图 像 。 人 了 图 4-28 【插入 鼠标 经 过 图 像 】 对 话 框 

口 预 载 鼠 标 经 过 图 像 ”启用 该 复 选 框 , 在 浏览 网 页 时 原始 图 像 和 鼠标 经 过 图 像 都 将 
被 显示 出 来 。 


口 替换 文本 ”用 于 输入 为 使 用 只 显示 文本 浏览 器 的 访问 者 描述 图 像 的 注释 。 
口 按 下 时 ， 前 往 的 URL 用 于 设置 鼠标 单 击 该 图 像 后 所 转向 的 目标 。 





在 网 页 中 插入 图 像 之 后 ， 选 择 图 像 则 会 在 【属性 】 面 板 中 显示 图 像 的 各 个 属性 ， 如 
图 4-29 所 示 。 
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和 图 4-29 【属性 】 面 板 
图 像 【 属 性 】 面 板 中 主要 参数 的 作用 如 表 4-2 所 示 。 
3 表 4-2_ 图 像 属 性 及 作用 














主要 用 于 显示 图 像 缩 略图 、 大 小 和 图 像 在 网 页 中 唯一 的 标识 
用 于 显示 图 像 的 源 文件 地 址 





Src 








Class 用 于 图 像 在 网 页 中 所 应 用 的 CSS 样式 
宽 和 高 图 像 在 水 平方 向 〈 宽 ) 和 科 直 方向 〈 高 ) 的 尺寸 





用 于 指定 在 只 显示 文本 的 浏览 器 或 已 设置 为 手动 下 载 图 像 的 浏览 器 中 代替 图 像 显 
示 的 替换 文本 

用 于 设置 图 片 的 提示 信息 ， 设 置 之 后 将 鼠标 停留 在 图 片上 将 显示 提示 信息 
图 像 所 应 用 的 超 链接 URL 地 址 







替换 
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续 表 
属 性 作 用 
调用 相关 的 图 像 处 理 软件 编辑 图 像 〈 例 如 ，PSD 使 用 Photoshop，PNG 使 
用 Fireworks) 
打开 【图 像 优 化 】 对 话 框 ， 优 化 图 像 
如 使 用 的 是 PSD 文档 输出 的 图 像 文件 ， 可 将 图 像 与 源 PSD 关联 ， 单 击 此 
按钮 进行 动态 更 新 
对 图 像 进 行 裁剪 操作 ， 删 除 被 裁剪 掉 的 区 域 
对 已 经 调整 大 小 的 图 像 重 新 读 取 该 图 像 信 息 
在 弹出 的 【亮度 和 对 比 度 】 对 话 框 中 ， 调 整 图像 的 党 度 和 对 比 度 
在 弹出 的 【 锐 化 】 对 话 框 中 ， 消 除 图 像 的 模糊 效果 











选择 图 像 上 方 的 热点 链接 ， 并 进行 移动 或 其 他 操作 
在 图 像 上 方 绘制 一 个 矩形 的 热点 链接 区 域 


在 图 像 上 方 绘制 一 个 圆 形 的 热点 链接 区 域 











在 图 像 上 方 绘制 一 个 多 边 形 的 热点 链接 区 域 
原始 如 使 用 的 是 PSD 文档 输出 的 图 像 文件 ， 此 处 将 显示 PSD 文档 的 URL 路 径 


页 图 像 


为 网 页 插入 图 像 之 后 ， 还 需要 根据 网 页 的 设计 需求 ， 对 图 像 进行 一 系列 的 更 改 和 调 
整 ， 以 使 图 像 适应 网 页 的 整体 布局 。 
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原始 图 像 添加 到 网 页 后 ， 会 由 于 尺寸 过 大 或 过 小 而 影响 整体 布局 ， 此 时 用 户 可 通过 
裁剪 图 像 和 调整 图 像 大 小 等 方法 ， 来 更 改 图 像 。 


1. 调整 图 像 大 小 


网 页 中 所 添加 的 图 像 一 般 会 以 原始 大 小 进行 显示 ， 此 时 用 户 可 以 在 【属性 】 面 板 中 ， 
通过 调整 【 宽 】 和 【高 】 属 性 值 ， 来 调整 图 像 的 大 小 ， 如 图 4-30 所 示 。 














图 像 ，93K Sre |s/rhy/1. jp 国 1sss 无 v| 宽 (Wf484 | px v 门 兰 换 人 
节 | | 袍 祝 们 | OM FE HE OA sl mv 











地 图 如 | ”| 目标 四 v [让 至] 
[CsEo 7 [Gm 











和 图 4-30 ,设置 图 像 大 小 





提 ” 示 


调整 图 像 大 小 之 后 ， 在 【 宽 〗 和 【高 】 属 性 选项 右 侧 将 新 增 两 个 按钮 ， 单 击 8 按钮 可 以 将 图 像 重 置 
为 原始 大 小 ， 而 单 击 Y 按 钮 则 可 以 提交 图 像 大 小 。 


另外 ,用户 还 可 以 将 鼠标 移 至 图 电 
像 四 周 的 控制 点 上 , 通过 拖 动 鼠标 的 
方法 来 调整 图 像 的 大 小 。 例如 , 将 鼠 
标 移 至 图 像 右 下 角 的 控制 点 上 , 拖 动 
鼠标 即 可 等 比例 调整 图 像 的 大 小 , 如 
图 4-31 所 示 。 


2.， 裁剪 图 像 


裁剪 图 像 是 删除 图 像 中 多 余 的 
部 分 , 在 【属性 】 面 板 中 单 击 【裁剪 】 
按钮 ， 此 时 系统 将 自动 弹出 提示 框 ， 在 图 4-31 。 拖 披 图 像 
提示 用 户 是 否 进行 裁剪 操作 ， 单 击 【 确 定 】 按 钮 ， 如 图 4-32 所 示 。 

此 时 ， 在 图 像 中 将 出 现 一 个 裁剪 区 域 ， 拖 动 裁剪 区 域 四 周 的 控制 点 ， 即 可 调整 裁剪 
区 域 。 调 整 完毕 之 后 ， 双 击 鼠 标 或 按 下 Enter 键 ， 完 成 裁剪 操作 ， 如 图 4-33 所 示 。 






































| 
| 
| 
| 
| 
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| 图 4-32 裁剪 图 像 | 图 4-33 ,完成 裁剪 








@--4.5:2” 调整 图 像 -、 


调整 图 像 是 根据 设计 需求 ， 调 整 图 像 的 亮度 、 对 比 度 、 清 晰 度 ， 以 及 优化 图 像 和 重 
新 取样 等 操作 ， 以 保证 图 像 的 最 佳品 质 。 


1. 优化 图 像 


优化 图 像 是 通过 调整 图 像 的 格式 和 品质 等 属性 ， 来 达到 美化 图 片 和 提升 网 页 加 载 速 
度 的 目的 。 选 择 图 像 ， 在 【属性 】 面 板 中 单 击 【 编 辑 图 像 设 置 】 按 钮 ， 在 弹出 的 【图 像 
优化 】 对 话 框 中 单 击 【 预 置 】 下 拉 按 钮 ， 选 择 一 种 预 置 选 项 ， 使 用 预 置 优 化 设置 ， 如 图 
4-34 所 示 。 

Dreamweaver 为 用 户 提 供 了 【用 于 照片 的 PNG24 (锐利 细节 )】、【 用 于 照片 的 JPEG 















































第 
4 
章 
网 
页 
基 
础 
元 
素 





97 





网 
页 
设 
计 
所 
网 
看 

组 
建 
标 
准 
教 


(对 0Zz0Zz 一 8L0Z) 前 





(连续 色调 )】 【徽标 和 文本 的 PNG8】【 高 清 JPEG 以 实现 最 大 兼容 性 】【 用 于 背景 图 像 
的 GIF (图 案 )】 和 【用 于 背景 图 像 的 PNG32 (渐变 )】6 种 预 置 样式 ， 除 了 使 用 每 种 预 
置 样式 默认 的 设置 之 外 ， 用 户 还 可 以 自 定义 优化 设置 。 

















例如 ， 使 用 【用 于 背景 图 像 的 GIF (图案)】 预 置 样式 时 ， 系 统 会 自动 显示 默认 的 各 
属性 设置 ， 如 图 4-35 所 示 。 
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x 
-| 
Cm 
格式 : |JPEG mh En 
;一 一 全 [ 通明 度 : 
ed | 
文件 大 小 : 82K 文件 大 小 : 165 KK 
& 了 图 4-34 。【 图 像 优化 】 对 话 框 人 了 图 4-35 .用 于 背景 图 像 的 GIF 








2. 调整 亮度 和 对 比 度 


调整 亮度 和 对 比 度 主要 用 于 修饰 过 暗 或 过 亮 的 图 像 ， 该 操作 可 以 影响 图 像 的 高 亮 显 
示 、 阴 影 和 中 间 色 调 。 























选择 图 像 ， 在 【属性 】 面 板 中 单 击 【 亮 
度 和 对 比 度 】 按 钮 。 在 弹出 的 【亮度 /对 比 三- 一 
度 】 对 话 框 中 ， 通 过 调整 【亮度 】 和 【对 比 | yu 
度 ] 参 数值 ,来 调整 图 片 的 过 暗 或 过 亮 效 果 ，| 二 一 一 g 一 一 [0 同 im 








如 图 4-36 所 示 。 
3. 锐 化 图 像 


锐 化 图 像 是 通过 增加 图 像 边 缘 像 素 的 对 比 度 ， 来 达到 增加 图 像 清晰 度 或 锐 度 的 优化 
效果 。 


和 图 4-36 调整 亮度 /对 比 度 













选择 图 像 ， 在 【属性 】 面板 中 单 击 加 x 
【 锐 化 】 按 钮 。 在 弹出 的 【 锐 化 】 对 话 | 器 
框 中 ， 通 过 设置 【 锐 化 】 选 项 值 , 来 增 [一 [B 














加 图 片 的 清晰 度 ， 如 图 4-37 所 示 。 [ET 
4. 重新 取样 
[了 图 4-37 _, 锐 化 图 像 

在 Dreamweaver 中 调整 图 像 大 小 “一 一 一 


时 ， 用 户 可 以 对 图 像 进行 重新 取样 ， 以 适应 其 新 尺寸 。 但 是 ， 对 位 图 对 象 进行 重新 取样 
时 ， 会 在 图 像 中 添加 或 删除 像素 ， 以 使 其 变 大 或 变 小 。 


[wl 




















另外 ， 对 图 像 进行 重新 取样 以 取得 更 高 的 分 辩 率 一 般 不 会 导致 品质 下 降 。 但 重新 
取样 以 取得 较 低 的 分 辩 率 总 会 [ 
导致 数据 丢失 , 并 且 通 常会 使 品质 
下 降 。 

如 用 户 想 对 图 像 重新 取样 ,只 
需 在 【属性 】 编辑 器 中 单 击 【重新 
取样 】 按钮 即 可 ,如 图 4-38 所 示 。 在 图 4-38 。 重 新 取样 





现 “ 一 图 多 链 ” 的 超 链接 特效 。 
图 像 热 点 只 是 在 一 幅 图 像 中 的 某 一 部 分 区 域内 包含 超 链 接 信息 ， 对 于 图 像 中 其 他 未 
定义 的 区 域 不 存在 任何 影响 ， 一 般 用 于 导航 栏 制作 和 地 图 多 点 链接 等 。 


1. 绘制 热点 形状 


Dreamweaver 为 用 户 提供 了 矩形 、 
圆 形 和 多 边 形 3 种 热点 工具 ， 在 【属性 】 
面板 中 选择 一 种 热点 工具 ， 移 动 鼠 标 至 
图 像 上 方 , 拖 动 鼠标 即 可 绘制 热点 形状 ， 
如 图 4-39 所 示 。 


2. 设置 热点 属性 


绘制 热点 之 后 ， 在 【属性 】 面 板 中 a 摧 点 形 
将 自动 显示 热点 属性 。 此 时 ， 用 户 可 在 a 
【链接 】 文 本 框 中 输入 链接 地 址 ， 例 如 输入 http://www.baidu.com 地 址 。 然 后 ,将 【目标 】 
选项 设置 为 【_blank】)， 在 【替换 】 文 本 框 输入 “百度 搜索 "。 其 各 属性 设置 的 含义 表示 单 击 
图 像 中 的 热点 ， 将 会 自动 链接 到 “百度 ”网 页 中 ， 进 行 相应 的 搜索 操作 ， 如 图 4-40 所 示 。 

最 后 ， 保 存 网 页 文档 ， 按 下 F12 键 ， 系 统 将 自动 跳 转 到 浏览 网 页 中 。 在 该 网 页 中 单 
击 图 像 中 的 热点 区 域 ， 系 统 将 自动 跳 转 到 “百度 ”页 面 中 ， 如 图 4-41 所 示 。 
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和 | 图 4-40 ,设置 热点 属性 和 图 4-41 最终 效果 
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课堂 练习 : :诗歌 目录 页 





在 实际 工作 中 ， 用 户 习 惯 在 Word 中 制作 各 类 目录 。 其 实在 Dreamweaver 中 也 可 以 
制作 各 类 目录 ， 并 且 可 以 通过 不 同 的 类 别 形 式 来 表现 它们 ， 例 如 项 目 列表 形式 、 编 号 列 
表 形 式 等 。 在 本 练习 中 ， 将 通过 制作 诗歌 目录 页 ， 来 详细 介绍 在 Dreamweaver 中 快速 制 
作 目 录 的 操作 方法 ， 如 图 4-42 所 示 。 





和 图 4-42 诗歌 目录 页 


操作 步骤 : 
新 建 空白 文档 ， 单 击 【 属性 】 面板 中 的 【页 
面 属性 】 按钮 ， 如 图 4-43 所 示 。 





和 图 4-43 。【 属 性】 面板 


在 弹出 的 【 页面 属性 】 对 话 框 中 ， 单 击 【 背 
景 图 像 ] 选项 右 侧 的 【 浏览 】 按钮 ， 如 图 
4-44 所 示 。 
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三 | 图 4-44 。【 页 面 属性 】 对 话 框 


在 弹出 的 【选择 图 像 源 文件 】 对 话 框 中 , 选 
择 图 像 文件 , 单 击 [ 确定 ] 按钮 , 如 图 4-45 
所 示 。 
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和 图 4-45 ,选择 背景 图 像 

在 【页 面 属性 】 对 话 框 中 , 将 【 重复】 设置 
为 no-repeat， 如 图 4-46 所 示 。 

激活 左 侧 【 标题 /编码 】 选 项 卡 ， 在 【 标题 】 
文本 框 中 输入 页 面 标题 ， 并 单 击 【 确定 ] 按 
钮 ， 如 图 4-47 所 示 。 
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表 景 颜色 (B) 
背景 图 从 (TD): 区 
重 夏 (E); 
左 四 人 0 i :I 
上 边 距 (P): 3 下 边 中 0): P| 
助 00) CC 村] | 靖 W 
和 | 图 4-46 设置 图 片 重复 样式 
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和 | 图 4-47 设置 网 页 标题 















































回 在 【设计 】 视 图 中 输入 标题 文本 , 换行 后 单 
击 【 属性】 面板 中 的 【项 目 列表 】 按钮 ， 如 
图 4-48 所 示 。 





4-48 输入 标题 文本 


在 项 目 符号 右 侧 输入 相应 的 文本 , 换行 后 继 
续 输入 文本 ， 以 此 类 推 输入 所 有 的 文本 ， 如 
图 4-49 所 示 。 

图 选择 第 2~5 行 中 的 “ 登 黄 鹤 楼 ”诗歌 文本 ， 
单 击 【 属性 】 面板 中 的 【文本 缩 进 】 按钮 ， 
如 图 4-50 所 示 。 








性- 

人 图 4-50 ,创建 二 级 项 目 列表 

回 选择 二 级 项 目 列表 , 单 击 【 属性 】 面板 中 的 
【 列表 编号 ] 按钮 ， 转 换 项 目 列表 为 编号 列 
表 ， 如 图 4-51 所 示 。 使 用 同样 方法 ， 创 奸 
其 他 二 级 编号 列表 。 


sl base 


上 
| 
| 
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和 图 4-51 ,创建 二 级 编号 类 别 


选择 标题 文本 ， 单 击 【 属性 】 面板 中 的 【 格 
式 】 下 拉 列 表 ， 选 择 【 标题 1】 选项， 如 图 
4-52 所 示 。 

切换 到 【 代码 ] 视图 中 ， 在 标题 文本 标签 前 
面 添 加 <blockquote> </blockquote> 标 签 ， 
设置 缩 进 , 如 图 4-53 所 示 。 使 用 同样 方法 ， 
在 <ul> 标 签 前 后 添加 该 标签 。 






































29 <1i> 登 黄 谁 楼 

21 <oL> 

22 <1i> 白 日 依 山 尽 ，</1Li> 

23 <1i> 黄 河 入 海流 。</1i> 

24 <1i> 欲 广 干 里 目 ，</Li> 

25 <1i> 更 上 一 层 楼 。</1i> 

26 </ol> v 











图 像 是 网 页 中 重要 的 多 媒体 元 素 之 一 ， 在 Dreamweaver 中 不 仅 可 以 插入 图 像 ， 而 且 
还 可 以 通过 设置 图 像 的 对 齐 与 环绕 格式 ， 来 达到 图 文 混 排 的 效果 ， 以 帮助 用 户 制作 出 更 
加 生动 、 直 观 、 丰 富 多 彩 的 网 页 。 在 本 练习 中 ， 将 通过 制作 “月 是 故乡 明 ” 网 页 〈 如 图 
4-54 所 示 )， 来 详细 介绍 图 像 对 齐 与 环绕 的 操作 方法 和 实用 技巧 。 
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和 图 4-54 ,图像 对 齐 与 环绕 效果 








操作 步骤 : 

新 建 空白 文档 , 在 【 属性 】 面板 中 设置 文档 按钮 ， 如 图 4-56 所 示 。 
标题 , 并 单 击 【 页 面 属性 ] 按钮 , 如 图 4-55 
所 示 。 分 类 外观 Css) 


页 面相): 加 要 池 信 vl | | 
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4-55 【属性 】 面 板 上 这 6 六) = Fa 


















































EL ls 台 消 oy 
在 弹出 的 【页 面 属性 ] 对 话 框 中 ,将 [ 背景 二 
颜色 】 设置 为 “#F7FOF0"， 并 单 击 【 确 定 】 图 4-56 设置 背景 颜色 





执行 【插入 ] IDiv 命令 ， 在 【插入 Div】 对 
话 框 中 单 击 【 新 建 CSS 规则 ] 按钮 ， 如 图 
4-57 所 示 。 




















新 建 Css 规则 











和 | 图 4-57 。【 插 入 Div】 对 话 杠 


在 【新 建 CSS 规则 】 对 话 框 中 ， 设 置 选择 
器 名 称 ， 并 单 击 【 确定 】 按钮 ， 如 图 4-58 
所 示 。 





选择 器 类 型 : 
为 C33 规则 选择 上 下 文选 择 器 类 型 > 





Ctrl+Shift+Space 组 合 键 调整 段落 缩 进 , 如 
图 4-60 所 示 。 








沁 是 改 多 明 


;每 个 人 都 有 个 故乡 ， 人 人 的 故 多 都 有 个 月 高。 人 人 都 爱 自己 故 
; 但是， 如 果 只 有 孤零零 一 个 月 亮 ， 未 免 显得 有 点 孤单 。 因 此 ， 
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A 我 小 的 时 候 ， 从 来 没有 风 
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& 了 图 4-60 设置 段落 缩 进 


选择 标题 文本 ， 单 击 【 属性 】 面板 中 的 【 格 
式 】 下 拉 按钮 ， 选 择 【 标题 1 】 选 项 ， 如 图 
4-61 所 示 。 








类 (本 应 用 于 任何 wm 元素) 


选择 器 名 称 : 
选择 或 输入 选择 器 名 称 。 


EJ] 
Te 
\ 四 输入 ] 
规则 


定义 
这 二 多 人 5 天 | 
《全 限 该 文档 ) | 而 























4-58 设置 选择 器 名 称 


在 弹出 的 对 话 框 中 ， 激 活 【 方 框 】 选项 卡 ， 
将 Width 设置 为 “1200px”, 并 单 击 [ 确定 】 
按钮 ， 如 图 4-59 所 示 。 














;每 个 人 都 有 个 故乡 ， 人 人 的 故 儿 都 有 个 月 高 。 人 人 都 爱 自己 故 
ee 如 果 只 有 孤零零 一 个 月 亮 ， 未 免 显得 有 点 孤单 。 因 此 


























和 图 4-61 ,设置 标题 文本 格式 


图 在 [属性 ] 面 板 中 的 CSS 选项 卡 中 单 击 [ 居 
中 对 齐 】 按钮 ， 对 齐 标题 文本 ， 如 图 4-62 
所 示 。 














各 有 上 D 王 示 ] 二 


上 因此 ， 二 月 亮 总 有 什么 东西 当 陪衬 ， 最 多 






































~ Float(T) ~ 
~ Clear(C) 司 
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和 | 图 4-59 ,设置 Div 标签 的 宽度 
加 将 “月 是 故乡 明 ” 文 本 复制 到 Div 中 ,使 用 























和 图 4-62 ,设置 对 齐 格式 


图 选择 全 部 正文 内 容 ， 在 【 属性 ] 面板 中 的 
CSS 选项 卡 中 设置 字体 大 小 和 颜色 ， 如 图 
4-63 所 示 。 
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将 图 像 的 垂直 和 水 平 边 距 分 别 设置 为 3， 贡 
图 4-66 所 示 。 


| 


&rdquo; 等 等 ， 不 可 肚 数 。 <br> 











4-63 设置 字体 大 小 和 颜色 








将 光标 定位 在 文本 中 , 执行 [ 插入 儿 图 像 】 
命令 ， 在 弹出 的 对 话 框 中 选择 图 像 文 件 ， 单 
击 【确定 】 按钮 ， 如 图 4-64 所 示 。 在 图 像 标签 中 继续 添加 border="3" 标 签 , 为 
图 像 添加 3px 的 边框 ,如 图 4-67 所 示 。 使 
用 同样 方法 ， 插 入 并 设置 另外 一 张 图 像 。 


| 图 4-66 设置 垂直 和 水 平 边 距 


“图像 并 与 环 缮 ，images v 已。 省 images* 用 











组 织 本 加 选择 图 

才 亿 速 访 同 — 

ss [一 es elspienbsgi 和 是 cing ore 

加 we " hei 

Ce 
并 wa 
程 en erestndspeoepi heb; 
全 有 、 人 月 水 ardqun 了 夏天 ， 
S 4-64 选择 图 像 文件 
f 1 加 b> + 
S 调整 图 像 大 小 和 位 置 , 右 击 图 形 执行 [对 齐 】 图 4-67 。 添 加 图 像 边框 

攻 左 对 齐 ] 命 令 , 此 时 文字 将 自动 环绕 图 像 ， 


选择 所 有 的 文本 和 图 像 ， 单 击 【 属性 】 面板 中 


的 【 编 进 ] 按钮 , 缩 进 内 容 , 如 图 4_68 所 示 。 




















| 图 4-65 ,设置 图 像 对 齐 方 式 








选择 图 像 ， 切 换 到 【 代码 】 视图 中 ， 在 图 像 [了 图 4-68_, 缩 进 内 容 
标签 中 添加 hspace="3" vspace="3" 标 签 ， 





一 、 填 空 题 允许 用 户 在 复制 了 文本 的 情况 下 ， 选 择 性 地 粘贴 
文本 中 某 一 个 部 分 。 
1. Dreamweaver CC 2015 提供 了 » 2. 对 于 较 多 的 文本 内 容 ， 使 用 
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可 以 清晰 地 体现 出 文本 的 逻辑 关系 ， 使 文本 更 加 
美观 ， 也 更 易于 阅读 。 
3. 在 默认 情况 下 ， 的 每 个 列表 
项 目 之 前 都 会 带 有 一 个 圆 点 “ ”作为 项 目 符号 。 
4. 项 目 列表 是 的 ， 用 户 可 以 方 
便 地 将 一 个 新 的 项 目 列表 作为 已 有 项 目 列表 的 
， 插 入 到 网 页 文档 中 。 
5. 除了 设置 项 目 列表 中 文本 的 样式 ， 
Dreamweaver 还 允许 用 户 设 置 项 目 列 表 中 
本 身 的 样式 。 
6. 在 Dreamweaver 中 ， 不 仅 可 以 插入 一 些 
普通 的 图 像 文件 ， 还 可 以 插入 鼠标 经 过 图 像 、 





等 类 型 的 图 像 。 
7. 在 Dreamweaver 中 调整 图 像 大 小 时 ， 用 
户 可 以 对 图 像 进行 ， 以 适应 其 新 尺寸 。 
二 、 选 择 题 


1. 设置 水 平 线 的 宽度 为 。 ， 然 后 设置 其 
高 度 为 较 大 的 值 ， 可 得 到 垂直 线 。 
A. 1 
B. 2 
os 
D. 50 
2. 在 默认 状态 下， 编号 列表 的 每 个 列表 项 
目 之 前 都 会 带 有 一 个 作为 项 目 符号 。 
A. 标签 
B. 数字 
C. 逗号 
D. 加 点 
3. 编号 列表 在 默认 情况 下 只 支持 一 种 项 目 
符号 ， 即 普通 的 
A. 英文 
B. GB2312 
C. 阿拉 伯 数 字 
D. 小 数 点 
4. 定义 列表 是 一 种 特殊 的 列表 ， 其 本 身 是 
为 的 词 条 解释 提供 一 种 固定 的 格式 。 
词典 
书目 
目录 











ER 


5. 用 户 可 以 通过 组 合 键 ， 快 速 打 
开 【 选 择 图 像 源 文件 】 对 话 框 。 
A. CtltI 
BCtrlHAIHI 
C. AltrI 
D. Ctrl+Shift+I 
6. 主要 用 于 修饰 过 暗 或 过 亮 的 图 
像 ， 该 操作 可 以 影响 图 像 的 高 党 显示 、 阴 影 和 中 
间 色 调 。 
A. 锐 化 图 像 
B. 调整 亮度 和 对 比 度 
C. 优化 图 像 
D. 重新 取样 


三 、 问 答题 


1. 简单 介绍 设置 段落 样式 的 方法 。 
2. 简单 介绍 插入 特殊 字符 的 方法 。 
3 如何 使 用 图 像 热点 ? 

4. 如 何 调整 图 像 的 亮度 和 对 比 度 ? 


四 、 上 机 练习 


1. 优化 图 像 

在 本 练习 中 , 将 运用 编辑 图 像 功 能 ， 对 网 页 
中 的 图 像 进行 优化 ,如 图 4-69 所 示 。 首 先 新 建 空 
白文 档 ， 执 行 【 插 入 】|【 图 像 】 命令， 插入 一 张 
图 片 。 然 后 ， 选 择 图 像 ， 单 击 【 属 性】 面板 中 的 
【亮度 和 对 比 度 】 按 钮 ， 在 弹出 的 【亮度 /对 比 度 】 
对 话 框 中 ， 将 【亮度 】 和 【对 比 度 】 分 别 设置 为 
“-15” 和 “24”。 最 后 ， 单 击 【 属 性 】 面 板 中 的 
【 锐 化 ] 按钮 , 在 弹出 的 【 锐 化 】 对 话 框 中 , 将 【 锐 
化 】 设 置 为 “10”， 并 单 击 【 确 定 】 按 钮 。 





& 图 4-69 ,优化 图 像 
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2. 制作 鼠标 经 过 图 像 
在 本 练习 中 ， 将 运用 插入 Div 和 图 像 等 功 
能 , 制作 一 个 鼠标 经 过 图 像 效 果 , 如 图 4-70 所 示 。 
首先 ， 新 建 空白 文档 ， 执 行 【 插 入 】|Div 命令 ， 
在 弹出 的 【插入 Div】 对 话 框 中 ,将 D 设置 为 
box， 并 单 击 【 新 建 CSS 规则 】 按 钮 ， 创 建 CSS 
规则 以 设置 标签 的 大 小 ， 其 CSS 规则 代码 如 下 
所 述 : 
#box { 
height: 640px; 
width: 1137px; 





1 
然后 ， 删 除 Div 标签 内 的 文本 ， 执 行 【 插 


入 】I【 图 像 】 | 鼠标 经 过 图 像 】 命 令 ， 在 弹出 的 
【插入 鼠标 经 过 图 像 ] 对 话 框 中 , 设置 【原始 图 像 】 
和 【鼠标 经 过 图 像 】 选 项 ， 单 击 【确定 】 按 钮 即 
可 。 最 后 ， 执 行 【文件 】 保存】 命令 ， 保 存 网 
页 ， 并 按 下 F12 键 在 网 页 中 查看 最 终 效 果 。 








和 图 4-70 ,鼠标 经 过 图 像 
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5.1 创建 文本 与 图 像 链 接 











到 | 
页 
设 
计 
己 
网 
站 
组 
建 
标 
准 
教 
程 
六 
3 
oo 
六 
二 
局 
上 

















文本 链接 是 通过 某 段 文本 指向 一 个 目标 的 连接 关系 ， 适 用 于 为 某 段 文本 添加 注释 或 


评论 的 设计 。 
1. 文本 链接 类 型 








在 创建 的 文本 链接 中 ， 包 含 下列 4 种 状态 : 


橙色 。 





时 的 状态 ， 即 为 紫红 色 带 下 画 线 。 


2. 链接 文本 


在 网 页 中 选择 文本 , 在 【插入 】 
面板 中 的 HTML 类 别 中 ， 单 击 
Hyperlink 按钮 ， 或 者 执行 【插入 】 
|Hyperlink 命令 。 在 弹出 的 Hyperlink 
对 话 杠 中， 设置 【链接 【目标 
【标题 】 等 选项 ， 单 击 【 确 定 】 按 钮 
即 可 ， 如 图 5-1 所 示 。 

在 Hyperlink 对 话 框 中 ， 主 要 
包括 下 列 6 种 选项 : 

口 文本 显示 在 设置 超 链接 
时 选择 的 文本 , 表示 即将 进 
行 超 链接 的 文本 内 容 。 











口 链接 用 于 设置 链接 的 文本 路 径 ， 


访问 键 : 
Tab 键 索引 : 


: | 填 与 核对 可 单 信息 





口 普通 在 打开 的 网 页 中 ， 超 链接 为 最 基本 的 状态 ， 即 默认 显示 为 蓝 色 带 下 画 线 。 

口 鼠标 滑 过 ” 当 饼 标 滑 过 超 链接 文本 时 的 状态 。 虽然 多 数 浏 览 器 不 会 为 鼠标 滑 过 的 
超 链接 添加 样式 ， 但 用 户 可 以 对 其 进行 修改 ， 使 之 变 为 新 的 样式 。 

口 鼠标 单 击 ” 当 饼 标 在 超 链 接 文本 上 按 下 时 ， 超 链接 文本 的 状态 ， 即 为 无 下 画 线 的 


口 已 访问 ” 当 和 鼠标 已 单 击 访问 过 超 链接 , 且 在 浏览 器 的 历史 记录 中 可 找到 访问 记录 





















































和 图 5-1 ,设置 链接 选项 


在 为 文本 添加 超级 链接 后 , 用 户 还 可 在 
然后 ， 在 【链接 】 右 侧 的 输入 文本 框 中 输入 超级 链接 的 地 址 或 修改 超级 链接 ， 以 及 设置 





【标题 】 和 【目标 】 等 属性 。 


可 通过 单 击 【 浏 览 〗 按 钮 选择 链接 文本 。 

口 目标 ”用 于 设置 链接 到 的 目标 框架 ， 其 中 ,【_blank】〗 表 示 将 链接 文件 载 入 到 新 
的 未 命名 浏览 器 中 ,【_parent】 表 示 将 链接 文件 载 入 到 父 框架 集 或 包含 该 链接 的 
框架 窗口 中 ,【_self】 表 示 将 链接 文件 作为 链接 载 入 同一 框架 或 窗口 中 ,【_top】 
表示 将 链接 文件 载 入 到 整个 浏览 器 窗口 并 删除 所 有 框架 。 

口 标题 ”用 于 设置 筷 标 经 过 链接 文本 所 显示 的 文字 信息 。 

口 访问 键 ”在 其 中 设置 键盘 快捷 键 以 便 在 浏览 器 中 选择 该 超级 链接 。 

口 Tab 键 索 引 用 于 设置 Tab 键 顺序 的 编号 。 





属性 】 面 板 中 , 选择 HTML 选项 卡 [<>ymw]。 


图 像 链接 是 通过 某 个 图 像 指 向 一 个 目标 的 连接 关系 。 在 网 页 中 选择 图 像 ， 在 【属性 】 
面板 中 ， 单 击 【链接 】 选 项 右 侧 的 【浏览 文件 】 按 钮 ， 如 图 5-2 所 示 。 

然后 ， 在 弹出 的 【选择 文件 】 对 话 框 中 ， 选 择 要 链接 的 图 像 文 件 ， 并 单 击 【确定 】 
按钮 ， 如 图 5-3 所 示 。 
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和 图 5-2_, 选 择 图 像 和 图 5-3_, 选 择 链接 页 面 


在 为 图 像 添 加 超级 链接 后 ， 保 存 文档 并 按 F12 快捷 键 打开 正 窗口 ， 当 鼠标 指向 链 
接 图 像 并 且 单 击 后 ， 在 新 窗口 中 会 打开 所 链接 的 文件 。 


在 Dreamweaver 中 ， 除 了 可 以 创建 文本 和 图 像 链接 之 外 ， 还 可 以 创建 电子 邮件 、 脚 
本 、 锚 记 等 链接 。 

1. 创建 电子 邮件 链接 

电子 邮件 链接 是 网 页 中 必 不 可 少 的 链接 对 象 ， 以 方便 收集 网 友 对 该 网 站 的 建议 或 意 
见 ， 它 可 以 以 文本 和 图 像 等 对 象 进行 创建 。 

在 【属性 】 面 板 中 的 【链接 】 文 本 框 中 输入 E-mail 地 址 ， 其 输入 格式 为 
mailto:name@servercom。 其 中 ，name@servercom 替换 为 要 填写 的 E-mail 地 址 。 例 如 ， 


为 图 形 添加 电子 邮件 链接 时 ， 则 需要 选择 图 像 ， 然 后 在 【链接 】 文 本 框 中 输入 邮件 地 址 
即 可 ， 如 图 5-4 所 示 。 


2. 创建 脚本 链接 
脚本 链接 即 执行 JavaScript 代码 或 调用 JavaScript 函数 。 首先， 在 网 页 中 选择 链接 对 
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象 。 然 后 , 在 【属性 】 面 板 的 【链接 】 文 本 框 中 输入 “javascript ” 内容 ,其 后 跟 JavaScript 
代码 或 一 个 函数 调用 ， 如 图 5-5 所 示 。 

















发 了 图 5-4_, 创 建 电子 邮件 链接 和 图 5-5_, 输 入 链接 脚本 


创建 脚本 链接 之 后 ， 在 【代码 】 视 图 中 将 会 显示 新 创建 的 脚本 链接 代码 ， 如 图 5-6 
所 示 。 








<1goctype html> 
<html> 
<head> 

4 <meta charset="utf-8"> 
<title> 无 标题 文档 </title> 


6 </head> 


<body> 
a href="javascript:Windows. close(t) ing src="3.jpg" width= 
EETENE IETS 


</body> 
</html> 





和 图 5-6 ,脚本 链接 代码 


3. 创建 空 链接 

空 链 接 是 未 指派 的 链接 ,用 于 
向 页 面 上 的 对 象 或 文本 附加 行为 。 
例如 ， 可 向 空 链接 附加 一 个 行为 ， 
以 便 在 指针 滑 过 该 链接 时 会 交换 
图 像 或 显示 绝对 定位 的 元 素 (AP 
元 素 )。 

在 网 页 中 选择 链接 对 象 ， 在 
【 属性】 面板 中 的 【链接 】 文 本 框 
中 ,输入 “#”( 井 号 ) 即 可 ， 如 图 
5-7 所 示 。 

另外 ， 用 户 也 可 以 在 【链接 】 
文本 框 中， 输入“ javascript:;” 
(javascript 后 面 依次 接 一 个 冒号 和 ”了 了 图 5-7 ,创建 # 空 链接 
一 个 分 号 )， 如 图 5-8 所 示 。 
















































4. 创建 锚 记 链接 


锚 记 链接 是 指 同一 个 页 面 中 
不 同位 置 处 的 链接 。 例 如 , 在 网 页 











页 的 该 标题 相对 应 的 位 置 设置 一 
个 错 点 链接 , 从 而 形成 一 个 锚 记 链 
接 状 态 , 以 方便 用 户 通 过 链接 快速 
跳 转 到 所 需 浏览 的 位 置 。 


和 图 5-8_, 创 建 脚本 空 链接 














首先 ， 需 要 为 跳 转 到 的 浏览 位 置 处 添加 锚 点 。 在 网 页 中 将 光标 定位 在 所 需 添加 错 点 


的 位 置 ， 切 换 到 【代码 】 视 图 中 ， 在 光标 处 输入 <a> 标 签 ， 并 在 标签 中 添加 id 属性 设置 
例如 “<a name=" 锚 点 " id=" 锚 点 "></a>” 锚 点 代码 ， 如 图 5-9 所 示 。 
此 时 ， 返 回 到 【设计 】 视 图 中 ， 将 会 发 现在 光标 处 插入 了 一 个 锚 记 标识 。 在 网 页 








b 





选择 需要 链接 到 锚 记 的 对 象 ， 并 在 【属性 】 面 板 中 的 【链接 】 文 本 框 中 输入 符号 # 和 锚 记 





名 称 ， 创 建 锚 记 链接 ， 如 图 5-10 所 示 。 





ldoctype html> 
<html> 


<head> 


<meta charset-"utf-e"> 
<title> 无 标题 文档 </title> 
head> 





和 图 5-9_, 输 入 锁 点 代码 和 图 5-10 ,设置 链接 








为 保证 整个 网 站 的 运行 ， 在 创建 网 页 链接 之 后 ， 除 了 通过 检查 链接 状态 来 检查 断 掉 


的 链接 之 外 ， 还 需要 通过 测试 链接 、 更 改 链接 和 设置 新 链接 的 相对 路 径 等 方法 ， 来 更 正 
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和 测试 网 站 中 的 链接 。 
1. 检查 链接 状态 


当 用 户 为 网 页 创建 链接 之 后 ， 可 通过 “链接 检查 器 ”功能 ， 来 检查 网 页 中 的 链接 状 
态 。 首 先 ， 执 行 【窗口 】|【 结 果 】|【 链 接 检查 器 】 命 令 ， 在 弹出 的 【链接 检查 器 】 面 板 
中 查看 链接 状态 ， 如 图 5-11 所 示 。 

在 面板 中 的 【显示 】 选 项 中 ,包括 【 断 掉 的 链接 【外 部 的 链接 】 和 【孤立 的 文件 】 
3 种 检查 类 型 ， 用 于 查找 断 掉 、 外 部 和 孤立 的 链接 。 

除 此 之 外 ， 用 户 还 可 以 通过 单 击 左 侧 的 【检查 链接 】 按 钮 ， 在 展开 的 菜单 中 选择 所 
需 执行 的 检查 方式 ， 包 括 【 检 查 当前 文档 中 的 链接 人 【检查 整个 当前 本 地 站 点 的 链接 】 
和 【检查 站 点 中 所 选 文件 的 链接 】3 种 状态 ， 如 图 5-12 所 示 。 






和 图 5-11 【链接 检查 器 】 面 板 


当 用 户 选 择 【检查 整个 当前 本 车 
地 站 点 的 链接 】 选 项 时 ， 
Dreamweaver 将 自动 检查 本 地 站 
点 的 所 有 链接 , 并 在 【链接 检查 器 】 
面板 中 显示 检查 结果 ， 包 括 总 链 
接 、 正确、 断 掉 和 外 部 链接 等 检查 
结果 ， 如 图 5-13 所 示 。 








当 用 户 需要 修改 断 掉 的 无 效 . 二 





链接 ,可 以 在 【链接 检查 器 】 面 板 | /ei 作 必 

中 , 单 击 链接 地 址 , 对 其 进行 修改 

即 可 ， 如 图 5-14 所 示 。 《了 图 5-14 ,修改 链接 
2， 更改 所 有 链接 


在 Dreamweaver 中 ， 当 用 户 不 小 心 删除 某 个 文件 所 链接 到 的 文件 时 ， 则 需要 对 该 链 
接 进 行 更 改 ， 以 杜绝 发 送 断 掉 的 链接 现象 。 但 是 ， 对 于 大 型 的 网 站 来 讲 ， 在 查找 并 更 改 
众多 链接 中 的 某 个 链接 时 ， 会 比较 费时 费力 ， 此 时 ， 用 户 可 通过 更 改 整 个 站 点 范围 内 的 
链接 方法 ， 来 解决 上 述 文件 。 

选择 所 需 更 改 站 点 内 的 某 个 文件 ， 执 行 【 站 点 】| 【改变 站 点 范围 内 的 链接 】 命 令 ， 
在 弹出 的 【更 改 整 个 站 点 链接 (站 点 -化 妆 品 网 页 )】 对 话 框 中 ， 设 置 相应 选项 即 可 ， 如 





图 5-15 所 示 。 
在 该 对 话 框 中 , 主要 包括 下 列 两 种 
选项 : 
口 更 改 所 有 的 链接 单 击 该 选项 | 
后 的 【浏览 文件 】 按 钮 ， 在 弹 | 讲 二 新 尖 祝 四 
出 的 对 话 框 中 选择 所 需 修 改 的 
目标 文件 即 可 。 当 用 户 所 需 更 
改 的 链接 为 电子 邮件 链接 .FTP 
链接 、 空 链接 或 脚本 链接 时 ， 
则 需要 在 文本 框 中 直接 输入 所 要 更 改 的 链接 的 完整 文本 。 

口 变 成 新 链接 单 击 该 选项 后 的 【浏览 文件 】〗 按 钮 ， 在 弹出 的 对 话 框 中 选择 所 需 修 
改 的 替换 文件 即 可 。 当 用 户 所 需 更 改 的 链接 为 电子 邮件 链接 、FTP 链接 、 空 链 
接 或 脚本 链接 时 ， 则 需要 在 文本 框 中 直接 输入 所 要 替换 的 链接 的 完整 文本 。 


| 


3. 设置 链接 的 相对 路 径 


默认 情况 下 ，Dreamweaver 是 使 用 相对 路 径 来 创建 指向 站 点 中 其 他 页 面 的 链接 。 此 
时 ， 如 果 要 更 改 站 点 根 目录 中 的 相对 路 径 ， 必 须 通 过 重新 定义 本 地 文件 夹 来 充当 服务 器 
上 文档 根 目录 的 等 效 目录 ， 以 确定 文件 站 点 根 目录 中 的 相对 路 径 。 

首先 ， 执行 【站 点 】1【 管 理 站 点 】 命令, 在 弹出 的 【管理 站 点 】 对 话 框 中 ,双击 【您 
的 站 点 】 列 表 框 中 的 站 点 名 称 ， 如 图 5-16 所 示 。 

然后 ， 在 弹出 的 【站 点 设置 对 象 站 点 2】 对 话 框 中 ， 选 择 【高 级 设置 】 栏 中 的 【本 
地 信息 】 选 项 卡 。 在 【链接 相对 于 】 栏 中 选中 【文档 】 或 【站 点 根 目录 】 选 项 ， 设 置 新 
链接 的 相对 路 径 即 可 ， 如 图 5-17 所 示 。 





和 | 图 5-15 更改 链接 








和 图 5-16 ,选择 站 点 和 图 5-17 ,设置 链接 的 相对 路 径 
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Flash 是 由 Adobe 公司 推出 的 交互 式 矢量 图 和 Web 动画 的 标准 ， 利 用 它 可 以 创作 出 
既 漂 亮 又 可 以 改变 尺寸 的 导航 界面 及 其 他 奇特 的 效果 ， 是 目前 网 络 上 最 流行 、 最 实用 的 
动画 格式 。 


Flash 动画 属于 SWF 格式 的 文件 ， 用 户 可 以 在 网 页 中 直接 插入 ， 并 通过 该 【属性 】 
面板 来 设置 Flash 动画 的 各 项 属性 。 


1. 插入 普通 Flash 动画 


在 网 页 中 选择 插入 位 置 ， 执 行 【插入 】IHIMLIFlash SWF 命令 ; 或 者 在 【插入 】 面 
板 中 ， 选 择 HTML 类 别 ， 单 击 Flash SWF 按钮 ， 如 图 5-18 所 示 。 

然后 ， 在 弹出 的 【选择 SWF】 对 话 框 中 ， 选 择 SWF 文件 ， 并 单 击 【确定 】 按 钮 ， 
如 图 5-19 所 示 


No 


















































和 | 图 5-18 ,选择 插入 位 置 和 图 5-19 ,选择 插入 文件 


此 时 ， 系 统 会 自动 弹出 【对 象 标签 辅助 功能 
属性 】 对 话 框 ， 设 置 相应 选项 ， 单 击 【 确 定 】 按 






































钮 即 可 。 另外， 用 户 也 可 以 直接 单 击 【取消 】 按 | a 
钮 ， 插 入 Flash SWF 文件 ， 如 图 5-20 所 示 。 a [Tab 一 











如 果 在 插入 对 象 时 不 起 输入 此 信息 ， 知 更改- 铺 
有 zh 能 -首选 允 蕴 。 


2. 设置 Flash SWF 文件 属性 


选择 插入 的 Flash SWF 文件 ， 可 在 【属性 】 
面板 中 设置 Flash SWF 的 相关 属性 ， 如 图 5-21 





和 图 5-20 .设置 功能 属性 


所 示 。 





加 名 帘 () so] 文件 () Corons Skinl. sf a Class 无 v| 
es 看 


FlashID 高 人 0) 加 四 
回 循 下 已 Bs | 品质 (9) | 高 品质 v 对齐 信里 认 值 、 v 
回 自 动 笑 放 (U) 水 平 边 距 (P) | | 比例 (s) | 点 认 《全 部 显示 ) v "nod 名) | 不 表 明 v | 多 数 .| 














和 图 5-21 ,设置 属性 
其 中 ,【 属 性 】 面 板 中 的 各 选项 的 具体 含义 ， 如 表 5-1 所 示 。 

3 表 5-1 ,Flash SWF 属性 选项 
选 项 含 义 

ID 为 SWF 文件 指定 唯一 的 卫 
宽 和 高 以 像素 为 单位 指定 影片 的 宽度 和 高 度 















文件 指定 SWF 文件 的 路 径 ， 单 击 文件 夹 图 标 可 以 浏览 指定 文件 

FL 编辑 单 击 该 按钮 ， 可 以 在 弹出 的 Flash 软件 中 编辑 影视 文件 

背景 颜色 指定 影片 区 域 的 背景 颜色 

编辑 启动 Flash 以 更 新 FLV 文件 ， 如 果 没 有 安装 Flash， 则 此 按钮 被 禁用 


Class 用 于 对 影片 应 用 的 CSS 类 

循环 启用 该 复 选 框 ， 可 使 影片 连续 播放 

自动 播放 启用 该 复 选 框 ， 在 加 载 页 面 时 将 自动 播放 影片 

乖 直 /水 平 边 距 指定 影片 上 、 下 、 左 、 右 空白 的 像素 数 
低 品 质 自动 以 最 低 品质 播放 Flash 动画 以 节省 资源 

怖 检测 用 户 计算 机 ， 尽 量 以 较 低 品质 播放 Flash 动画 以 节省 资源 
自动 高 品质 “| 检测 用 户 计 算 机 ， 尽 量 以 较 高 品质 播放 Flash 动画 以 节省 资源 






自动 以 最 高 品质 播放 Flash 动画 
显示 整个 Flash 动画 
比例 i 使 影片 适合 设 定 的 尺寸 ， 因 此 无 边框 显示 并 维持 原始 的 纵横 比 


对 影片 进行 缩放 以 适合 设 定 的 尺寸 ， 而 不 管 纵横 比例 如 何 

默认 方式 显示 Flash 动画 ， 定 义 Flash 动画 在 DHTML 内 容 上 方 

Wmode | 不 透明 定义 Flash 动画 不 透明 显示 ， 并 位 于 DHTML 元 素 下 方 
透明 定义 Flash 动画 透明 显示 ， 并 位 于 DHTML 元 素 上 方 

对 齐 设置 影片 在 页 面 中 的 对 齐 方式 

参数 定义 传递 给 Flash 影片 的 各 种 参数 


3. 设置 透明 动画 


如 果 Flash 动画 没有 背景 图 像 ， 则 可 以 在 【属性 】 面 板 中 的 【参数 】 选 项 将 其 设置 
为 透明 动画 。 
首先 ， 插 入 一 个 不 包含 背景 的 Flash 动画 ， 保 存 文档 。 在 正 浏览 器 中 浏览 Flash 动 
。 此 时 ， 用 户 会 发 现 该 动画 为 黑色 背景 ， 并 且 履 盖 了 背景 图 像 ， 如 图 5-22 所 示 。 
然后 ， 在 Dreamweaver 文档 中 ， 选 中 该 Flash 动画 , 将 Wmode 选项 设置 为 【透明 】， 
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如 图 5-23 所 示 。 


EE 可 - 目 和 











Fr | 
> 





el 


IN 





Bel, 
a 





Ea 
ES 
更 0) 550 门 文 折 四 Fe 
| 加 uk | 高 Oo CI 














本 证 (0 委 直 边 更 () 品 大 (0) [高 吕 所 
| 加 名 放 人 0) 水 平 边 跑 () HG ER 和 -| mia ] 











5-22_ 插 入 Flash 动画 5-23 设置 Wmode 选项 














设置 完成 后 ， 再 次 保存 该 文档 。 并 通过 正 浏览 器 浏览 网 页 中 的 动画 效果 。 此 时 , 所 
以 发 现 Flash 动画 的 黑色 背景 被 隐藏 ， 网 页 背景 图 像 完全 显示 ， 如 图 5-24 所 示 。 


--5.2.2 插入 Flash 视频 - 


FLV 是 一 种 新 的 视频 格式 , 全 称 为 Flash Video。 用 户 可 以 向 网 页 中 轻松 添加 FLV 视 
频 ， 而 无 须 使 用 Flash 创作 工具 。 

1. 累进 式 下 载 视 频 

累进 式 下 载 视 频 是 将 FLV 文件 下 载 到 站 点 访问 者 的 硬盘 上 ， 然 后 进行 播放 。 但 是 ， 
累进 式 下 载 视频 方法 运行 允许 在 视频 下 载 完 成 之 前 就 开始 播放 视频 。 

选择 插入 视频 位 置 ， 执 行 【 揪 入】IHIMLIFlash Video 命令 ， 在 弹出 的 【插入 FLV】 
对 话 框 中 ， 单 击 【 浏 览 】 按 钮 ， 如 图 5-25 所 示 。 
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D。 更 观看 各 须 ， 请 在 洲 上 关中 和 页 面 * 





5-24 最终 效 果 5-25 【插入 FLV】 对 话 框 


其 中 ， 在 【插入 FLV】 对 话 框 中 ， 各 选项 的 具体 含义 如 表 5-2 所 示 。 





32 表 5-2_， 插入 FLV 选项 及 含义 




































视频 类 型 用 于 设置 视频 类 型 ， 包 括 【 累进 式 下 载 视频 】 和 【 流 视频 】 两 种 类 型 

URL 用 于 指定 FLV 文件 的 相对 路 径 或 绝对 路 径 

外 观 用 于 指定 视频 组 件 的 外 观 ， 可 通过 单 击 其 下 拉 按 钮 ， 在 下 拉 列 表 中 选择 外 观 样式 
宽度 和 高 度 以 像素 为 单位 指定 FLV 文件 的 宽度 和 高 度 
















限制 高 宽 比 启用 该 复 选 框 ， 可 保持 视频 组 件 高 度 和 宽度 之 间 的 比例 不 变 
检测 大 小 用 于 确定 FLV 文件 的 准确 宽度 和 高 度 
日 动 播放 启用 该 复 选 框 ， 可 以 在 页 面 打 开 时 自动 播放 FLV 文件 






自动 重新 播放 


然后 ， 在 弹出 的 【选择 FLV】 对 话 框 中 ， 选 择 所 需 插入 的 FLV 文件 ， 单 击 【确定 】 
按钮 ， 如 图 5-26 所 示 。 


启用 该 复 选 框 ， 可 以 重复 播放 FLV 视频 


最 后 , 在 【插入 FLV] 对 话 框 中 , 单 击 【 确 定 】 按 钮 , 文档 中 将 会 出 现 一 个 带 有 Flash 四 
Video 图 标的 灰色 方 框 ， 如 图 5-27 所 示 。 章 
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5-26 选择 插入 文件 5-27 ,插入 FLV 


此 时 ， 用 户 可 以 在 【属性 】 面 板 中 ， 设 置 FLV 文件 的 尺寸 、 文 件 URL 地 址 、 外 观 
等 属性 ， 如 图 5-28 所 示 。 

保存 该 文档 并 预览 效果 ,可 以 发 现 当 和 鼠标 经 过 该 视频 时 , 将 显示 播放 控制 条 ; 反之 ， 
离开 该 视频 ， 则 隐藏 播放 控制 条 ， 如 图 5-29 所 示 。 
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图 5-28_ 设置 属性 了 图 5-29_ 最终 效果 


与 常规 Flash 文件 一 样 ， 在 插入 FLV 文件 时 ，Dreamweaver 将 插入 检测 用 户 是 否 拥有 可 查看 视频 的 
正确 Flash Player 版 本 的 代码 。 如 果 用 户 没 有 正确 的 版 本 ， 则 页 面 将 显示 替代 内 容 ， 提 示 用 户 下 载 
最 新 版 本 的 Flash Player。 





117 


教 
程 
S 
® 
S 
S 
上 








118 


2. 流 视 频 


流 视 频 是 对 视频 内 容 进行 流 式 处 理 ， 并 经 一 段 可 确保 流畅 播放 的 很 短 缓冲 时 间 后 在 
网 页 上 播放 该 内 容 。 

选择 插入 视频 位 置 ， 执 行 【插入 】IHETMLIFlash Video 命令 ， 在 弹出 的 【插入 FLV】 
对 话 框 中 ， 将 【视频 类 型 】 选 项 设置 为 【 流 视 频 】〗 并 设置 有 关 流 视频 的 相关 选项 ， 单 击 
【确定 】 按 钮 ， 如 图 5-30 所 示 。 

















视频 类 型 | 流 视 频 ~ 确定 




















服务 器 URI [rtnp: /nyserver/wyapp/nyinstance 亏 助 


《请 输入 服务 器 名 称 、 应 用 程 和 实例 名 称 
例如 ，rtmpJmyserverImyapplmyinstance) 











流 名 称 : 流浪 狗 
外 观 : Clear skin 1 (最 小 宽度 : 140) -| 








= 1 只 











宽度 : 600 | 回 限制 高 亮 比 【机 出 大 小 ] 
高 度 : E00 | 也 括 引 现 : 600x500 

口 实时 视频 输入 

自动 播 放 

口 自动 重新 播放 

组 时 间 : 秒 






































(DD” 要 观看 视频 ， 请 在 浏览 器 中 预览 页 面 * 
您 还 需要 上 传 所 需 的 文件 。 显示 所 垂 的 文件 _ 








和 | 图 5-30 【插入 FLV】 对 话 框 


其 中 ， 有 关 【 流 视频 】 类 型 的 各 选项 的 具体 含义 ， 如 表 5-3 所 示 。 
5 表 5-3 。【 流 视频 】 类 型 的 各 选项 











指定 服务 器 名 称 、 应 用 程序 名 称 和 实例 名 称 
指定 想 要 播放 的 FLV 文件 的 名 称 。 扩 展 名 为 “.flv” 是 可 选 的 
指定 视频 组 件 的 外 观 。 所 选 外 观 的 预览 会 显示 在 【外 观 】 弹 出 菜单 的 下 方 
以 像素 为 单位 指定 FLV 文件 的 宽度 


















高 度 以 像素 为 单位 指定 FLV 文件 的 高 度 
限制 高 宽 比 保持 视频 组 件 的 高 度 和 宽度 之 间 的 比例 不 变 。 默 认 情 况 下 会 选择 此 选项 


指定 视频 内 容 是 否 是 实时 的 , 启用 该 复 选 框 后 组 件 的 外 观 上 只 会 显示 音量 控件 ， 








实时 视频 答 入。 | 用 户 无 法 操纵 实时 视频 
御 动 所 用 指定 在 Web 页 而 打开 时 是 于 所 放 视 频 
自动 重新 播放 ”| 指定 播放 控件 在 视频 播放 完 之 后 是 否 返 回 起 始 位 置 





缓冲 时 间 指定 在 视频 开始 播放 之 前 进行 缓冲 处 理 所 需 的 时 间 〈 以 秒 为 单位 》 





设置 完成 后 ， 文 档 中 同样 会 出 现 一 个 带 有 Flash Video 图 标的 灰色 方 框 。 此 时 ， 用 户 
还 可 以 在 【属性 】 面 板 中 ， 重 新 设置 FLV 视频 的 尺寸 、 服 务 器 URI、 外 观 等 属性 。 


5.3 插入 HTMLS 媒体 


新 版 的 Dreamweaver 除了 可 以 插入 Flash 动画 和 视频 之 外 ， 还 可 以 插入 HIMLS 媒 
体 ， 包 括 HTMLS5 音频 和 HTML5 视频 两 种 类 型 的 媒体 。 


HIML5 音频 元 素 提 供 一 种 将 音频 内 容 柑 入 到 网 页 中 的 标准 方式 。 在 网 页 中 选择 音 
频 放置 位 置 ， 单 击 【 插 入 】 面 板 中 的 HTML5 Audio 按钮 ， 音 频 会 自动 插入 到 指定 位 置 ， 
并 以 图 标的 形式 进行 显示 ， 同 时 在 【代码 】 视 图 中 将 显示 有 关 音 频 的 HTML 代码 ， 如 图 
5-31 所 示 。 

插入 HTMLS5 音频 之 后 ， 在 网 页 中 只 显示 了 音频 图 标 。 此 时 ， 用 户 还 需要 在 【属性 】 
面板 中 单 击 【 源 】 按 钮 右 侧 的 【浏览 】 按 钮 。 在 弹出 的 【选择 音频 】 对 话 框 中 ， 选 择 音 
频 文件 ， 单 击 【确定 】 按 钮 即 可 ， 如 图 5-32 所 示 。 








| chidhood memory 从 愉 的.ml ~ 








和 图 5-32 ,选择 音频 文件 


除了 设置 【 源 】 选 项 之 外 ， 用 户 还 可 以 在 【属性 】 面 板 中 设置 其 他 属性 选项 ， 如 图 
5-33 所 示 。 


[av aone | 

















Autoplay Preload |none v 
Muted Alt 源 2 名 























和 图 5-33 设置 属性 


其 中 ， 在 【属性 】 面 板 中 ， 除 了 【 源 】【Alt 源 1】 和 【Alt 源 2】 选 项 之 外 ， 还 包 
括 下 列 几 种 选项 : 
口 Title (标题 ) ”用 于 设置 音频 文件 的 标题 。 
口 回 退 文本 ”用 于 设置 在 不 支持 HTML5 浏览 器 中 所 显示 的 文本 。 
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Controls (控件 ) ”启用 该 复 选 框 ， 可 以 在 HTML 页 面 中 显示 音频 控件 。 
Loop〔 循 环 音频 ) ” 启用 该 复 选 框 ， 可 以 连续 播放 音频 。 
Autoplay〔 自 动 播放 ) 启用 该 复 选 框 ， 在 加 载 网 页 时 便 自动 播放 音频 。 
Muted (静音 ) ”启用 该 复 选 框 ， 表 示 下 载 音频 之 后 该 音频 为 静音 状态 。 
Preload〈 预 加 载 ) ”用 于 设置 下 
载 时 音频 的 加 载 内 容 ， 选 择 auto 
(自动 ) 选项 ， 表 示 在 页 面 下 载 
时 加 载 整 个 音频 文件 ; 选择 
metadata ( 元 数据 ) 选项 ,表示 在 
页 面 下 载 完成 之 后 仅 下 载 元 
数据 。 

设置 各 属性 选项 并 保存 网 页 后 , 按 下 
F12 键 即 可 在 浏览 器 中 预览 音频 效果 , 如 
图 5-34 所 示 。 





加 他国 .全国 











HTML5 视频 元 素 提供 一 种 将 
电影 或 视频 嵌入 网 页 中 的 标准 方 
式 。 在 网 页 中 选择 视频 放置 位 置 ， > 
单 击 【 插 入 】 面 板 中 的 HTML5 eta charsermnvtf-e" 


<title> 无 标题 文档 </title> 
</head> 


尚 流 靖 东 了 栖 卜 革 司 灯 玫 沛 半 司 
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Video 按钮 ， 视 频 会 自动 插入 到 指 

定位 置 ， 并 以 图 标的 形式 进行 显 

示 ， 同 时 在 【代码 】 视 图 中 将 显示 

有 关 视 频 的 HIML 代码 ,如 图 5-35 | 

所 示 。 or 
插入 HIML5 视频 之 后 , 在 网 


Ar4 


= 
洁 





5-35 插入 HIMILS 视频 


页 中 只 显示 了 视频 图 标 。 此 时 , 用 《了 图 5-35 
户 还 需要 在 【属性 】 面 板 中 设置 各 属性 选项 ， 如 图 5.36 所 示 。 





和 图 5-36 设置 属性 


其 中 ， 在 【属性 】 面 板 中 ， 除 了 通过 【 源 】【Alt 源 1】 和 【Alt 源 2】 选 项 用 于 设 
置 视频 地 址 之 外 ， 还 包括 下 列 几 种 选项 : 
口 Title (标题 ) ”用 于 设置 视频 文件 的 标题 。 





口 W (宽度) 和 于 (高度 ) ”以 像素 为 单位 设置 视频 的 宽度 和 高 度 。 
口 Poster (海报 ) ”用 于 设置 视频 完成 下 载 后 或 单 击 【播放 】 按 钮 后 所 显示 的 图 像 
的 地 址 。 


回 退 文本 ”用 于 设置 在 不 支持 HTMLS5 浏览 器 中 所 显示 的 文本 。 

Controls (控件 ) ”启用 该 复 选 框 ， 可 以 在 HIML 页 面 中 显示 视频 控件 。 
Loop 循 环视 频 ) ”启用 该 复 选 框 ， 可 以 连续 播放 视频 。 

Autoplay (自动 播放 ) ”启用 该 复 选 框 ， 在 加 载 网 页 时 便 自 动 播放 视频 。 

Muted (静音 ) ”启用 该 复 选 框 ， 表 示 下 载 视频 之 后 该 视频 为 静音 状态 。 
Preload ( 预 加 载 ) “用 于 设置 下 载 时 视频 的 加 载 内 容 ， 选择 auto ( 自动 ) 选项 ， 
表示 在 页 面 下 载 时 加 载 整个 视频 文件 ; 选择 metadata (元 数据 ) 选项 ， 表 示 在 页 
面 下载 完 成 之 后 仅 下 载 元 数据 。 

口 Flash 回 退 ”用 于 设置 对 于 不 支持 HIML 5 视频 的 浏览 器 所 使 用 的 SWF 文件 地 址 。 


gg 








当 用 户 插入 HIMLS 媒体 后 , 会 发 现 系统 是 使 用 HIMLS 中 的 <video> 标 签 和 <audio> 
标签 来 播放 音频 和 视频 文件 。 其 中 ，<video> 标 签 专门 用 来 播放 视频 文件 或 电影 ， 而 
<audio> 标 签 专门 用 来 播放 音频 文件 。 

在 支持 HTML5 的 浏览 器 中 ， 使 用 <video> 标 签 和 <audio> 标 签 播放 音频 视频 文件 ， 
装 插件 ， 浏 览 器 可 以 直接 识别 。 

在 HIML5 中 ， 使 用 <audio> 标 签 与 <video> 标 签 播放 音频 视频 文件 ， 具 有 的 属性 大 
致 相同 ， 其 详细 介绍 如 下 所 述 。 


1. src 属性 
src 属性 主要 用 于 设置 音频 视频 文件 的 URL 地 址 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf=8"> 
<title>src 属性 应 用 </title> 
</head> 

<body> 

<h5>src 属性 应 用 </h5> 
<audio src="sky.o0gg" controls></audio> 
</body> 

</html> 


上 述 代码 中 , 在 <audio> 标 签 中 , 使 用 src 属性 指定 音频 文件 的 URL 地 址 , 如 图 5-37 
所 示 。 


2. preload 属性 


preload 属性 默认 为 只 读 ,主要 用 于 指定 在 浏览 器 中 播放 音频 和 视频 文件 时 ， 是 否 对 





不 需 
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数据 进行 预 加 载 。 如 果 是 的 话 ， 浏 览 器 
会 预先 对 视频 或 音频 文件 进行 缓冲 ， 这 
样 可 以 提高 播放 的 速度 。 =rc 必 性 应 用 

preload 届 件 有 3 个 可 达 仁 ， 包括 | 2 
none、metadata 与 auto， 默 认 值 为 auto。 
none 表示 不 进行 预 加 载 。metadata 表示 
只 预 加 载 媒体 的 元 数据 (媒体 字 节 数 、 











音 猜 你 喜欢 历 “ 观 j 加 本 炒 下 载 Q100% .: 
第 一 帧 、 插 入 列表 、 持 续 时 间 等 )。auto 一 
表示 加 载 全 部 视频 或 音频 。 【图 5-37 .se 属性 应 用 





使 用 方法 如 下 : 
< audio src="sky.0gg" preload="auto"></ audio > 


3. poster 属性 


poster 属性 为 <video> 标 签 的 独 有 属性 ， 主 要 用 于 规定 视频 下 载 时 所 显示 的 图 片 ， 或 
者 当 视 频 不 可 用 时 ， 而 向 用 户 展示 一 幅 代用 视频 下 载 的 图 片 。 使 用 方法 如 下 : 


<video src="sky.ogv" poster="tpl.jpg"></video> 


4. autoplay 属性 
该 属性 主要 用 于 指定 在 页 面 中 加 载 音频 视频 文件 后 ， 设 置 为 自动 播放 。 
<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>autoplay 属性 应 用 </title> 
</head> 
<body> 
<h5>autoplay 属性 应 用 </h5> 
<audio src="sky.ogg" controls autoplay="true" ></audio> 








</body> 

</html> 

在 上 述 代码 中 ， 使 用 autoplay 属性 将 ogg [5 和 本 
视频 文件 , 设置 为 自动 播放 , 如 图 5-38 所 示 。 ed 

5. loop 属性 IC 

该 属性 主要 用 于 设置 是 否 循环 播放 视频 
或 音频 文件 ， 使 用 方法 如 下 : i Nt 














< audio src="sky.0gg" autoplay loop> 


和 & 了 了 图 5-38 _autoplay 属性 应 用 
</ audio > 


6. controls 属性 


该 属性 主要 用 于 设置 是 否 为 视频 或 音频 文件 添加 浏览 器 自 带 的 播放 控制 条 。 该 控制 
条 主要 包括 播放 、 和 暂停 和 音乐 控制 等 功能 。 使 用 方法 如 下 : 


7. width 和 height 属性 
该 属性 主要 用 于 设置 视频 的 宽度 和 高 度 ， 以 像素 为 单位 ， 使 用 方法 如 下 : 


8. networkState 属性 


默认 属性 为 只 读 ， 当 音频 或 视频 文件 在 加 载 时 ， 可 以 使 用 <video> 标 签 或 <audio> 标 
签 的 networkState 属性 读 取 当 前 的 网 络 状态 。 


9. error 属性 


在 播放 音频 和 视频 文件 时 ， 如 果 出 现 错误 ，error 属性 将 返回 一 个 MediaError 对 象 ， 
该 对 象 包含 了 错误 状态 。 











上 述 代 码 中 , 页 面 加 载 时 , 会 触发 err0 
事件 。er0 事 件 读 取 ogg 视频 文件 ， 使 用 
error 属性 返回 错误 信息 。 如 果 没 有 出 现 错 
误 ， 则 显示 “error 属性 未 发 现 错误 ” 否 
则 , 显示 相应 的 错误 信息 , 如 图 5-39 所 示 。 


10. readyState 属性 








D 
oo 
D 
OS 


可 以 使 用 <video> 标 等 或 <audio> 标 签 、[ 了 图 5-39 ,error 属性 应 用 
的 readyState 属性 返回 媒体 当前 播放 位 置 
的 就 绪 状 态 ， 共 有 5 个 可 能 值 。 


11. currentSrc 属性 
默认 属性 为 只 读 ， 主 要 用 于 读 取 播放 中 的 音频 或 视频 文件 的 URL 地 址 。 
12. buffered 属性 


该 属性 为 只 读 ， 可 以 使 用 <video> 标 签 或 <audio> 标 签 的 buffered 属性 来 返回 一 个 对 
象 ， 该 对 象 实现 TimeRanages 接口 ， 以 确认 浏览 器 是 否 已 缓冲 媒体 数据 。 


13. paused 属性 


Z 


0 


党 ( 


该 属性 主要 用 来 返回 一 个 布尔 值 ， 表 示 是 否 处 于 暂停 播放 中 ，true 表示 音频 或 视频 
文件 暂停 播放 ，false 表示 音频 或 视频 文件 正在 播放 。 








通过 浏览 器 ， 用 户 可 以 单 击 按钮 来 控制 音频 文件 当前 是 播放 状态 ， 还 是 暂停 状态 ， 
如 图 5-40 所 示 。 


<video> 标 签 与 <audio> 标 签 都 具有 
以 下 4 种 方法 。 


1. play 方 法 


使 用 play 方法 用 来 播放 音频 或 视频 所 7] 图 5-40。paused 属性 应 用 
文件 。 在 调用 该 方法 后 ，paused 属性 的 
值 变 为 false。 


2. pause 方法 


使 用 pause 方法 用 来 暂停 播放 音频 或 视频 文件 ， 在 调用 该 方法 后 ，paused 属性 的 值 
变 为 true。 


3. load 方法 
使 用 load 方法 重新 载 入 音频 或 视频 文件 , 进行 播放 。 这 时 , 标签 的 error 值 设 为 null， 











810Z 


0Z0Z 


playbackRate 属性 值 变 为 defaultPlaybackRate 属性 值 。 
4. canPlayType 方法 


使 用 canPlayType 方法 来 测试 浏览 器 是 否 支 持 要 播放 音频 或 视频 的 文件 类 型 ， 语 法 
如 下 : 
~ var support = videoglement.canplaytypeltype); 


videoElement 表示 <video> 标 签 或 <audio> 标 签 。 方 法 中 使 用 参数 type, 来 指定 播放 文 
件 的 MIME 类 型 。 


在 上 述 代码 中 ， 向 网 页 中 插入 一 段 ogv 视频 ， 通 过 单 击 【 播 放 】 或 【和 暂停】 按钮 实 
现 视频 的 播放 或 暂停 功能 ， 如 图 5-41 所 示 。 





e@-- 5.3.5 “HTML5 媒体 事件 … 


面 中 ， 
叶 ， 会 触发 一 系列 事件 。 用 户 可 以 使 用 JavaScript 脚 
本 捕捉 该 事件 并 进行 处 理 。 事 件 的 捕捉 和 处 理 主要 使 
<video> 标 签 和 <audio> 标 签 的 addEventListener 方 




















法 对 触发 事件 进 


VideoElement .addEventListener (type, 
listener,useCapture); 


上 述 代码 中 ，videoElement 表示 <video> 标 签 和 <audio> 标 签 ，type 表示 事件 名 称 ， 


listener 表示 绑 定 的 函数 ，useCapture 表示 事件 的 响应 顺序 ， 是 一 个 布尔 值 。 
在 使 用 <video> 标 签 与 <audio> 标 签 播放 视频 或 音频 文件 时 ， 和 触发 的 一 系列 事件 介绍 


如 表 5-4 所 示 。 


55 表 5-4 。 媒体 事件 描述 


名 称 
Pause 
Loadedmetadata 
Loadeddata 
Waiting 
Abort 


Loadstart 浏览 器 开始 在 网 上 寻找 媒体 数据 


Seeked 
Timeupdate 


Error 








对 视频 或 音频 文件 进行 加 载 或 播放 








进行 监听 ， 语 法 如 下 : 





5-41 ,多 媒体 方法 应 用 





描述 
播放 暂停 ， 当 执行 了 pause 方法 时 触发 
浏览 器 获取 完毕 媒体 的 时 间 长 和 字 节 数 
浏览 器 已 加 载 完 毕 当前 播放 位 置 的 媒体 数据 ， 准 备 播放 
播放 过 程 由 于 得 不 到 下 一 帧 而 暂停 播放 ， 但 很 快 就 能 够 得 到 下 一 帧 
浏览 器 在 下 载 完全 部 媒体 数据 之 前 中 止 获取 媒体 数据 ， 但 是 并 不 是 由 错误 引起 的 
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seeking 属性 变 为 false， 浏 览 器 停止 请 求 数据 

当前 播放 位 置 被 改变 ， 可 能 是 播放 过 程 中 的 自然 改变 ， 也 可 能 是 被 人 为 地 改变 ， 
或 由 于 播放 不 能 连续 而 发 生 的 跳 变 

获取 媒体 数据 过 程 中 出 错 

<video> 标 签 和 <audio> 标 签 所 在 网 络 突然 变 为 未 初始 化 状态 








Playing 正在 播放 

ee 浏览 器 能 够 播放 媒体 ， 但 估计 以 当前 播放 速率 不 能 直接 将 媒体 播放 完毕 ， 播 放 期 
间 需 要 缓冲 

Durationchange | 播放 时 长 被 改变 





Volumechange ”| volume 属性 (音量 ) 被 改变 或 muted 属性 (静音 状态 ) 被 改变 


浏览 器 能 够 播放 媒体 ， 而 且 以 当前 播放 速率 能 够 直接 将 媒体 播放 完毕 ， 不 再 需要 























Canplaythrough 进行 缓冲 

Seeking seeking 属性 变 为 tue， 浏 览 器 正在 请 求 数据 

Progress 浏览 器 正在 获取 媒体 数据 

Suspend | 浏览 器 暂停 获取 媒体 数据 ， 但 是 下 载 过 程 并 没有 正常 结束 

Ended 播放 结束 后 停止 播放 

ee a 属性 (默认 播放 速率 ) 或 playbackRate 属性 (当前 播放 速率 ) 
Loadstart 浏览 器 开始 在 网 上 寻找 媒体 数据 

Stalled 浏览 器 尝试 获取 媒体 数据 失败 

Play 即将 开始 播放 , 当 执行 了 play 方法 时 触发 , 或 数据 下 载 后 标签 被 设 为 autoplay ( 自 


动 播放 ) 属性 
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下 面 代码 为 页 面 添加 视频 播放 和 和 暂停 的 事件 捕捉 功能 。 


<!DOCTYPE HTML> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 捕 捉 事 件 </title> 
<script> 

Var video; 

function play() { 

Video = document .getElementById ("video"); 

Video.addEventListener ("pause", function(){ 
catchs = document .getElementById("catchs"); 
catchs .innerHTML=" 捕 捉 到 Pause 事件 "; 

}, false); 

Video.addEventListener ("play", function(){ 
catchs = document .getElementById ("catchs"); 
catchs .innerHTML=" 捕 捉 到 play 事件 "; 

}, false); 

if(video.paused) { 

video.play(); 





. 
else { 
video.pause (); 
} 
} 
</script> 
</head> 
<body> 
<video id="video" autobuffer="true"> 
<source src="4.0gv" type='video/ogg; codecs="theora, vorbis"'> 
</video> 
<input name="play" type="button" onClick="play()"” value=" 播 放 "> 
<span id="catchs"></span> 


</body> 
</html> 
当 用 户 单 击 【 播 放 】 按 钮 播放 视频 时 ， 会 自动 捕 记 s a 


捉 事 件 ， 如 图 5-42 所 示 。 





5.4 课堂 练习 : 制作 散文 页 面 


» 用 

随 着 网 络 的 飞速 发 展 ， 互 联网 小 说 越 来 越 流行 。 | Em 
在 阅览 小 说 的 时 候 ， 通 常会 发 现 页 面 比较 长 ， 往 返 比 
较 麻烦 。 在 本 练习 中 ， 将 通过 添加 锚 记 的 方法 ， 来 解 
决 页 面 过 长 的 问题 ， 如 图 5-43 所 示 。 和 7 图 5-42 .捕捉 事件 应 用 





散文 随笔 


第 -组 第 -元 
第 = 辑 这 是 三 - sl, 那 时 我 还 是 一 个 七 八 岁 的 孩子 。 多 间 的 生活 虽然 简 
Ss 单 ， 但 并 不 缺乏 

柳 哨 


色 青青 柳 色 黄 ” 家 乡 的 春天 就 这 样 悄然 而 至 。 最 早点 亮 家 乡 春色 的 就 是 
柳 ， we 柔软 的 枝条 。 我 喜欢 柳 ， 尤 其 是 喜欢 长 长 全 人 

所 来 ”个 又 一 个 温暖 的 春天 ， 也 摇 酬 了 信心。 乡下 的 接 子 们 心 柔软 的 
经 过 孩子 们 的 秒 担 和 切 训 训 委 成 了 手中 的 祁 请 < 温暖 的 春天 , 人 
就 会 听 到 柳 哺 那 明亮 的 哨 音 ， 伴 随 着 这 哨 音 的 还 有 孩子 们 欢快 的 笑 声 。 





& 了 图 5-43 散文 页 面 


操作 步骤 : 
新 建 空白 文档 ， 单 击 【 属性 面板 中 的 【页 
面 属性 】 按钮 ， 如 图 5-44 所 示 。 


























Wma| | 格式 (F) 无 v| ”类 | 无 ~ 


可 CS | mt) [无 ~] 贱 单 去 





























文档 标题 无 标题 文档 
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和 图 5-44。【 属 性 】 面板 


在 弹出 的 【 页 面 属性 】 对 话 框 中 ,将 【 背景 
颜色 】 设 置 为 “#FFB”， 并 单 击 【 确定 】 按 
钮 ， 如 图 5-45 所 示 。 








四 选择 










全 外 现 (css) 
q ) 页 而 字体 (2); [加 默认 字体 | ~ ~v| 
大 小 G) 习 属 
文本 而 @D): 国 四 设置 
Wane :Cllrs 
faed:CL ERROR 
0:[ | 


左边 路 负 攻 [@Y 十 jw CE 


Lu [大 Y Twx@). | 


[RD 取消 应 二 | 







































































和 图 5-45 设置 背景 颜色 


执行 【插入 】 |【 表格】 命令 , 插入 4 行 2 
列 , 宽度 为 “85%” 的 表格 , 如 图 5-46 所 示 。 

选择 表格 ， 在 【 属性 ] 面板 中 将 Align 设置 
为 【 居中 对 齐 ]】， 如 图 5-47 所 示 。 

选择 第 1 行 中 的 两 个 单元 格 ， 单 击 【 属性 】 
面板 中 的 【 合并 所 选单 元 格 ] 按钮 ， 如 图 
5-48 所 示 。 故 了 图 5-48 。 合 并 第 工行 2 个 单元 格 
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加 在 合并 后 的 单元 格 中 输入 散文 标题 ， 并 将 
【 属性 ] 面板 中 的 【 格式 】 选 项 设置 为 【 标 
题 1 ]， 如 图 5-49 所 示 。 















































































和 图 5-49 ,设置 散文 标题 


激活 【 属性 】 面 板 中 的 CSS 选项 卡 ， 单 击 
【 居中 对 齐 胺 钮 ,居中 对 齐 标题 ,如 图 5-50 
所 示 。 




















| 单元 格 。 水 平 @) 于 从 
一 CE -高 0 





和 图 5-50 设置 对 齐 格式 


贺 将 光标 定位 在 标题 文本 后 ,执行 【插入 】 
IHTMLI【 水 平 线 ] 命令 ， 插 入 水 平 线 ， 如 图 
5-51 所 示 。 
































Bootstrap 组 件 (B) 
jQvery Mobiel) 
jQuery Ut 

LA0] 











和 图 5-51 ,在 标题 下 插入 水 平 线 


加 选择 水 平 线 , 在 【属性 】 面板 中 , 将 【[ 宽 】 
设置 为 “100%”, 将 【高 设置 为 “3”, 如 























和 图 5-52 ,设置 水 平 线 的 属性 


选择 第 2 行 第 1 列 单元 格 , 在 【 属性】 面板 
中 ,将 【 宽 】 设置 为 “15%”， 将 【垂直 】 
设置 为 [ 顶端 } 并 输入 散文 列表 , 如 图 5-53 
所 示 。 























和 图 5-53 设置 单元 格 属性 


在 第 2 行 第 2 列 中 输入 散文 内 容 , 并 设置 段 
落 、 加 粗 和 缩 进 格式 ， 如 图 5-54 所 示 。 





I PP 











vv， 有 | 





第 - 辑 : ”第 - 郑 
第 - 辑 这 是 三 十 多 年 前 的 多 间 ， 那 时 我 还 是 一 
i 人 多 间 的 生活 虽然 简单 ,但 
第 三 辑 : ”并 不 缺乏 欢 
: 柳 咱 
让 多 ee 
亮 家 乡 春色 | 人 ee 











丝 在 春风 中 的 摇 忠 ， bs 
一 个 温 咀 的 春天 ， 了 扬 醇 了 人 心 。 .0 





和 图 5-54 设置 散文 内 容 


选择 第 3 行 中 的 2 个 单元 格 ， 单 击 【 属性 】 
面板 中 的 【 合并 所 选单 元 格 】 按 钮 ， 如 图 
5-55 所 示 。 
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PN ON OR RN RN [oy 
全 14 <table width="85%" border="0" align="center" cellpaddi 
me 天 辆 cellspacing="@"> 
css el ~ 赚 接 人 D | 0 
到 @ 单 击 风 J | 7+) 到 
一 回 二 mW ~ UE 标题 全 ) | 

了 向 Q 过 本 | 
这 | 的 末 边 是 醒 T 多 4 防 了 9 区 区 
| i [zs <td>xblockquotey 
| | ee 
和 ww -一 - | 
和 图 5-57_ 设置 锚 记 


和 图 5-55 合并 第 3 行 2 个 单元 格 

在 合并 后 的 单元 格 中 插入 水 平 线 , 并 将 [ 宽 】 
设置 为 “100%”， 将 【高 ] 设置 为 “3”， 如 
图 5-56 所 示 。 





三 荣 上 夯 开 了 梳 不 了 
喷 乒 。 孩 子 们 玩 累 了 就 躺 在 渠 边 晒 太阳 ， 渴 
了 就 掏 一 挤 深 水 。 


ry tal | 
DI 和 es 














了 雏 交 一 排 果 水 ， 了 图 5-58 设置 链接 

选择 顶端 的 水 平 线 , 切换 到 【 代码 ] 视 图 中 ， 
在 水 平 线 标签 中 添加 线条 颜色 的 代码 , 如 图 
5-59 所 示 。 使 用 同样 方法 ， 设 置 底 端 水 平 

民 图 5-56 。 合 并 后 的 单元 格 中 插入 水 平 线 线 的 颜色 。 


将 光标 定位 在 标题 文本 之 前 , 切换 到 [ 代码 】 2 
视图 中 ， 输 入 <a name="title” id='title"> i 
</a> 代 码 , 如 图 5-57 所 示 。 使 用 同样 方法 ， 
添加 其 他 锚 记 。 

在 第 4 行 的 第 2 列 单元 格 中 输入 “返回 顶端 
文本 ， 设 置 居 中 格式 ， 并 将 【链接 】 设置 为 
【# title ]， 如 图 5-58 所 示 。 使 用 同样 方法 ， 
为 散文 列表 设置 链接 。 


这 小 小 的 渠 边 曾经 站 
和 ¥ 

































<body> 
<table Widthme border="6" align="center" cellpaddin| 
ng=" 





关 人 员 ,对 销售 区 域 或 产品 的 查询 。 在 本 练习 中 ， te 图 像 、 绘 制 热 点 区 域 等 功 
能 来 制作 一 个 展示 销售 网 络 及 各 地 经 销 商 等 信息 的 销售 网 络 页 ， 如 图 5-60 所 示 。 
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各 地 零售 商 查询 











发 了 图 5-60 ,销售 网 络 页 


操作 步骤 : 

新 建 空白 文档 ,在 【 属性 ] 面板 中 ,在 【 文 
档 标题 文本 框 中 输入 “销售 网 络 页 ”文本 ， 
并 保存 文档 ， 如 图 5-61 所 示 。 
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发 图 5-61 设置 文档 标题 

切换 到 【 代码 】 视 图 中 ， 复 制 源 文 件 中 的 
CSS 规则 代码 到 标题 代码 下 方 ， 如 图 5-62 
所 示 。 









3 <head> 
4 <meta charset="utf-8"> 
<title> 宵 售 网 络 页 </title> 
style type="text/css"> 
#tbe1{ 
border:#84bb84 solid lpx; 
font-weight:bold; 
} 

















11| #tbe2{ 

12 border:#84bb84 solid lpx; 
13 font-size:13px; 

到 } 
EB\N</style> 

16 </head> 





和 图 5-62 ,复制 CSS 规则 代码 








总 部 地 址 : 北京 市 昌平 区 罗 河 路 。 客服 电话 : 010-12345578 010-87654321 
传真 ; 010-1234678 010-87654321 ”电子 邮件 : haohaizi 20108126.cmm 


切换 到 【 设计 】 视 图 中 , 执行 【插入 】1[ 表 
格 】 命令， 插入 2 行 1 列 , 像素 为 800 的 
表格 ， 如 图 5-63 所 示 。 







中 


吾 
要 
3 








图 图 图 | 








发 了 图 5-63 插入 表格 


加 碎 属 性 曾 板 中 ,将 表格 的 ID 选择 为 tbo1， 
将 Align 设置 为 【居中 对 齐 ]， 如 图 5-64 
所 示 。 

在 第 1 行 中 输入 文本 , 并 在 [ 属性 ] 面 板 中 ， 
将 【高 】 设置 为 “30"， 将 【背景 颜色 】 设 
置 为 “#d9edda”， 将 【 水平】 设置 为 【 居 
中 对 齐 ]， 如 图 5-65 所 示 。 























〖 了 图 5-64 设置 表格 属性 


Pe Pe EAT 














图 选择 图 像 , 单 击 【 属性】 面板 中 的 【 多边形 
热点 工具 】 按 钮 ， 在 图 像 中 绘制 热点 区 域 ， 
如 图 5-68 所 示 。 














日 CE 


cea 


C0) Pa 














和 图 5-65 ,设置 第 1 行 单元 格 属性 





回 选择 第 2 行 , 将 [高] 设置 为 “400”, 将 
【 背景 颜色 】 设置 为 “#eff7f0"， 将 【水 平 】 
设置 为 【居中 对 齐 】， 如 图 5-66 所 示 。 














上 了 图 5-66 。 设 置 第 2 行 单元 格 属性 





执行 【插入 ] |【 图 像 ] 命令 ， 在 弹出 的 【 选 
择 图 像 源 文件 】 对 话 框 中 ， 选 择 图 像 文件 ， 
单 击 【 确定 】 按钮 ， 如 图 5-67 所 示 。 
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和 图 5-67 ,插入 图 像 文件 











5-68 ,绘制 热点 区 域 


图 选择 热点 区 域 , 在 【属性 】 面板 中 , 将 【 链 
接 】 设 置 为 【#miyun 】 将 【目标 】 设 置 为 
【_blank ]， 如 图 5-69 所 示 。 




















5-69 ,设置 热点 属性 





执行 【插入 】|【 表格】 命令 , 插入 5 行 1 
列 ， 像 素 为 800 的 表格 ， 如 图 5-70 所 示 。 



































[了 图 5-70 插入 第 2 个 表格 


Bd ~ 
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硒 属性 面板 中 ,将 表格 的 ID 选择 为 tb02， 
将 Align 设置 为 【居中 对 齐 】)， 如 图 5-71 
所 示 。 














和 图 5-71_ 设置 表格 属性 


选择 第 1 行 ， 将 【高 度 】 设 置 为 “25"， 将 
【 背景 颜色 ] 设 置 为 “#d9edda"。 如 图 5-72 
所 示 。 使 用 同样 方法 , 设置 其 他 单元 格 的 高 
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1. 如 用 户 不 设置 【 按 下 时 ， 前 往 的 URL] 
选项 ，Dreamweaver 将 自动 将 该 选项 设置 为 
【 和 

2. 图 像 地 图 指 被 分 为 多 个 区 域 (热点 ) 的 
图 像 ， 而 图 像 热 点 隶属 于 图 像 地 图 ， 可 以 实现 
【 】 的 超 链接 特效 。 

3. 脚本 链接 即 执行 JavaScript 代码 或 调用 

函数 。 

4. 视频 是 将 FLV 文件 下 








同时 选择 第 3 行 和 第 4 行 , 将 [水平] 设置 
为 【 居中 对 齐 ]， 并 输入 相应 的 文本 。 如 图 
5-73 所 示 。 























& 了 图 5-73 输入 版 尾 文本 


选择 电子 邮箱 地 址 ， 将 【 链接 】 设 置 为 
“mailto:haohaizi_2010@126.com”， 如 图 
5-74 所 示 。 








和 图 5-74 ,设置 邮件 链接 


载 到 站 点 访问 者 的 影片 上 ， 然 后 进行 播放 。 


5. 当 用 户 插入 HIML5S 媒 体 后 ， 
标签 专门 用 来 播放 视频 文件 或 电影 ， 而 
标签 专门 用 来 播放 音频 文件 。 
6. 是 对 视频 内 容 进 行 流 式 处 理 ， 并 
在 一 段 可 确保 流畅 播放 的 很 短 缓冲 时 间 后 在 网 
页 上 播放 该 内 容 。 


二 、 选 择 题 


1. 在 创建 的 文本 链接 中 ， 包 含 普通 、 鼠 标 
滑 过 、 鼠 标 单 击 和 4 种 状态 。 





A. 已 访问 
B. 未 访问 
C. 鼠标 经 过 
D. 鼠标 双击 
2. 在 为 图 像 添加 超级 链接 后 ， 保 存 文档 并 
按 快捷 键 打开 正 窗口 。 
A. F6 
B;: Fil2 
C. AlttF12 
D. Ctrl+F12 
3. _ 是 未 指派 的 链接 , 用 于 向 页 面 上 的 
对 象 或 文本 附加 行为 。 
A. 脚本 链接 
B. 空 链 接 
C. 锚 记 链接 
D. 以 上 都 不 对 
4. _ ”属性 默认 为 只 读 ， 主 要 用 于 指定 
在 浏览 器 中 播放 音频 和 视频 文件 时 ， 是 否 对 数据 
进行 预 加 载 。 
A. preload 
B. sre 
C. poster 
D. loop 
5. <video> 标 签 与 <audio> 标 签 都 具有 play 
方法 、pause 方法 、canPlayType 方法 和 _。 
A. load 方法 
B. src 方法 
C. loop 方法 
D. poster 方法 
6. 在 页 面 中 ， 对 视频 或 音频 文件 进行 加 载 
或 播放 时 ， 会 触发 一 系列 事件 ， 可 以 使 用 


4. 如 何 使 用 图 像 热点 ? 
四 、 上 机 练习 


1. 制作 文件 下 载 链接 

在 本 练习 中 , 将 运用 超 链 接 功能 , 来 制作 一 
个 视频 文件 下 载 链接 , 如 图 5-75 所 示 。 首 先 新 建 
一 个 空白 文档 ， 插 入 一 个 2 行 1 列 的 表格 ， 设 置 
表格 属性 .然后 ,在 第 1 行 中 插入 一 个 Flash Video 
文件 ， 并 设置 播放 方式 和 影片 尺寸 。 然 后 ， 在 第 
2 行 中 插入 一 个 提示 下 载 文件 的 图 片 , 选择 图 片 ， 
在 【属性 】 面 板 中 单 击 【 链 接 】 后 面 的 【浏览 
件 】 按 钮 , 在 弹出 的 对 话 框 中 选择 下 载 文件 即 可 。 





ANATS, 


-了 图 5-75 ,文件 下 载 链接 





2. 设置 背景 音乐 

在 本 练习 中 ， 将 运用 插入 媒体 插件 的 方法 ， 
来 设置 网 站 的 背景 音乐 ， 如 图 5-76 所 示 。 首 先 ， 
新 建 网 页 文件 ， 执 行 【 插 入 】| 【图 像 】| 【图像 】 
命令 ， 插 入 一 个 图 片 ， 并 设置 图 片 大 小 。 然 后 ， 
执行 【插入 】 代 媒体 】 代 插件 】 命 令 ， 插 入 一 个 
mp3 音乐 文件 。 最 后 , 单 击 【属性 】 面板 中 的 【 参 
数 】 按 钮 ， 在 弹出 的 对 话 框 中 设置 音乐 元 素 的 参 
数 和 值 。 





脚本 捕 提 该 事件 并 进行 处 理 。 
A. C# 
B. HIML 
C. JavaScript 
D: Css 


三 、 问 答题 
1. 概述 超级 链接 的 作用 。 


2. 简单 介绍 超 链接 的 几 种 类 型 。 
3. 如 何 插入 Flash 动画 ? 


-TO ee NN 





和 图 5-76 ,设置 背景 音乐 
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网 页 表单 


6.1 添加 表单 


Dll 起 申 人 必 L14\ | 








信息 将 被 发 送 到 服务 器 ， 服 务 器 中 的 服务 器 端 脚本 或 应 用 程序 会 对 这 些 信息 进行 处 理 。 
服务 器 向 用 户 《 或 客户 端 ) 发 回 所 处 理 的 信息 或 基于 该 表单 内 容 执行 某 些 其 他 操作 ， 以 
此 进行 响应 。 

表单 是 一 种 特殊 的 网 页 容器 标签 。 用 户 可 以 插入 各 种 普通 的 网 页 标签 ， 也 可 以 插入 
各 种 表单 交互 组 件 ， 从 而 获取 用 户 输入 的 文本 ， 或 者 选择 某 些 特殊 项 目 等 信息 。 

表单 支持 客户 端 /服务 器 关系 中 的 客户 端 。 用 户 在 Web 浏览 器 〈 客 户 端 ) 的 表单 中 
输入 信息 后 ， 单 击 【 提 交 】 按 钮 ， 这 些 信息 将 被 发 送 到 服务 器 。 然 后 ， 服 务 器 中 的 服务 
器 端 脚 本 或 应 用 程序 会 对 这 些 信息 进行 处 理 。 

服务 器 向 用 户 〈 或 客户 端 ) 返回 所 请 求 的 信息 或 基于 该 表单 内 容 执行 某 些 操作 ， 以 
此 进行 响应 ， 如 图 6-1 所 示 。 


















































服务 器 处 理 表 单 
REE 
数据 库 
Ln 2 Ne 
ns] | 一 数据 表 
EE) EEE 用 户 昵称 | 真实 姓名 | 年 ” 瞪 | 职 业 
机 一 地] Ei Ee 
和 图 6-1 ,服务 器 示意 图 区 欢 刘 注 册 网 昂 通 行 证 
表单 可 以 与 多 种 类 型 的 编程 语言 进行 结合 ， | 
同时 也 可 以 与 前 台 的 脚本 语言 合作 ， 通 过 脚本 语 | 。 aanre . on | 





言 快 速 控制 表单 内 容 。 在 互联 网 中 ， 很 多 网 站 都 
通过 表单 技术 进行 人 机 交互 ， 包 括 各 种 注册 网 
页 、 登 录 网 页 、 搜 索 网 页 等 ， 如 图 6-2 所 示 。 MRA TA RE 


让 芝 WP 全 二 服务 人 了 类 六 注 轴 MIPRE 宰 ， 
所 这 ， 基 子 精 导 ， 人 名 账号 《 什 章 )》 ， 


@ -6:1:2 插 入 表单 en 








了 解 了 表单 的 基础 知识 之 后 ， 用 户 便 可 以 在 
网 页 中 添加 表单 了 ， 包 括 插入 表单 域 、 插 入 表单 “A 图 6-2 。 注 册 网 页 
标签 和 插入 域 集 等 内 容 。 


1. 插入 表单 域 


通过 表单 可 以 实现 网 页 互动 , 当然 在 
制作 网 页 时 用 户 需 要 先 添加 一 个 表单 域 ， | 
将 表单 元 素 放置 到 该 域 , 用 于 告诉 浏览 器 
这 一 块 为 表单 内 容 等 。 网 页 中 的 所 有 表单 
元 必须 网 名 汪 守 
2 否则 将 无 法 实 曾 基 和 区 抽 六 芝 

在 网 页 中 选择 所 需 插 入 表单 域 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 ， 单 
击 【 表 单 】 按 钮 ， 即 可 在 指定 位 置 插入 一 个 红色 的 表单 ， 如 图 6-3 所 示 。 
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插入 表单 域 之 后 ， 如 果 在 【设计 】 视 图 中 无 法 显示 表单 域 ， 则 可 以 通过 执行 【查看 】|【 可 视 化 助理 】 
| 【不 可 见 元 素 〗 命 令 ， 来 显示 表单 域 。 








除了 使 用 【插入 】 面 板 中 的 按钮 来 插 
入 表单 域 之 外 ， 用 户 还 可 以 通过 编写 代 
码 ， 来 插入 表单 域 。 即 ， 在 【代码 】 视 图 
中 ,通过 <form> 标 签 插入 表单 内 容 ， 如 图 














6-4 所 示 。 


插入 表单 域 之 后 ， 选 择 表单 域 ， 可 在 
【 属性】 面板 中 设置 表单 域 的 属性 ， 如 图 


6-5 所 示 。 





ers charset-nutr-en> 
5 <title; 无 标题 文档 </title> 
</head> 












































Novaidate Enctype 对 认 
Auto Complete 


| Ga 无 v| 








人 了 图 6-5 








【属性 】 面 板 


其 中 ,【 属 性 】 面 板 中 各 表单 域 属性 选项 的 具体 含义 ， 如 表 6-1 所 示 。 
3 表 6-1 








Action (动作 ) 


Method 
(方法 ) 


表单 属性 及 作用 









作 用 
表单 在 网 页 中 唯一 的 识别 标志 ， 只 可 在 【属性 】 检 查 器 中 设置 
将 表单 数据 进行 发 送 ， 其 值 采 用 URL 方式 。 在 大 多 数 情况 下 ， 该 属性 值 是 一 
个 HTTP 类 型 的 URL, 指向 位 于 服务 器 上 的 用 于 处 理 表单 数据 的 脚本 程序 文 
件 或 CGI 程序 文件 
使 用 浏览 器 默认 的 方式 来 处 理 表单 数据 
表示 将 表单 内 容 作为 消息 正文 数据 发 送 给 服务 器 
把 表单 值 添加 给 URL,， 并 向 服务 器 发 送 GET 请 求 。 因为 URL 被 限定 在 8192 
个 字符 之 内 ， 所 以 不 要 对 长 表单 使 用 GET 方法 
定义 在 未 命名 的 新 窗口 中 打开 处 理 结果 
定义 在 父 框架 的 窗口 中 打开 处 理 结果 


















定义 在 当前 窗口 中 打开 处 理 结果 
定义 将 处 理 结果 加 载 到 整个 浏览 器 窗口 中 ， 清 除 所 有 框架 









Enctype (编码 类 型 ) 


Class (类 ) 


设置 发 送 表单 到 服务 器 的 媒体 类 型 ， 它 只 在 发 送 方法 为 POST 时 才 有 效 。 
其 默认 值 为 application/x-www-form-urlemoded; 如 果 要 创建 文件 上 传 域 ， 
应 选择 multipart/form-data 
定义 表单 及 其 中 各 种 表单 对 象 的 样式 






Accept Charset 编码) ”| 用 于 选择 当前 提交 内 容 的 编码 方式 ， 如 UTF-8 或 者 ISO-8856-1 


Tite (标题 ) 


如 当前 没有 内 容 显 示 ， 将 该 标题 内 容 显 示 





No Validate (没有 验证 ) 


如 果 用 户 启动 该 选项 ， 则 当 输 入 表单 内 容 时 不 进行 验证 操作 





Auto Complete 
(自动 完成 ) 





当 用 户 启动 该 选项 时 ， 表 单元 素 将 对 输入 过 的 内 容 进行 自动 提示 功能 


表单 的 编码 类 型 是 体现 表单 中 数据 内 容 上 传 方式 的 重要 标识 。 如 用 户 设置 表单 的 
【方法 】 为 默认 的 GET 方法 后 ， 该 编码 类 型 的 设置 是 无 效 的 。 而 如 用 户 设置 表单 的 【 方 
法 】 为 POST 方法 后 ， 则 可 以 通过 编码 类 型 确定 数据 是 上 传 到 服务 器 数据 库 中 ， 还 是 同 
时 存储 到 服务 器 的 磁盘 中 。 


2. 插入 表单 标签 


用 户 创 建 表单 域 之 后 ， 即 可 向 表单 域 中 添加 表单 元 素 。 但是， 在 添加 表单 元 素 之 前 ， 
用 户 需 要 先 添 加 表单 元 素 的 名 称 ， 如 在 文本 框 之 前 显示 “姓名 ”或 者 “用 户 名 ”， 则 表示 
该 文本 需要 输入 的 内 容 。 

在 网 页 中 选择 所 需 插入 表单 标签 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 ， 
单 击 【 标 签 ] 按 钮 。 此 时 , 将 切换 至 【 拆 分 】 视 图 , 在 代码 中 将 显示 所 添加 的 <label></label> 
标签 ， 如 图 6-6 所 示 。 

在 <label></label> 标 签 之 间 ， 用 户 可 以 输入 表单 元 素 的 名 称 ， 如 输入 “用 户 名 :” 如 
图 6-7 所 示 。 
Er 


<head> 
meta charset="utf-8" 
<titte’ 无 杯 题 文档 </titte> 





和 图 6-6 插入 【标签 】 按 钮 

<label> 标 签 为 <input> 标 签 定义 标注 〈 标 记 )， 它 不 会 向 用 户 呈 现任 何 特殊 效果 。 不 
过 ， 它 为 鼠标 用 户 改进 了 可 用 性 。 如 果 用 户 在 <label> 标 签 内 单 击 文本 ， 就 会 触发 此 控件 。 
也 就 是 说 ， 当 用 户 选择 该 标签 时 ， 浏 览 器 会 自动 将 焦点 转 到 和 标签 相关 的 表单 控件 上 。 


rr 


3. 插入 域 集 


当 表 单 中 所 插入 的 内 容 比 较 多 且 没 有 规划 好 时 ， 其 整体 会 显得 杂乱 无 章 。 此 时 ， 用 
户 可 以 使 用 【 域 集 】 功能 来 解决 上 述 问题 。 其 中 ,【 域 集 】 主要 功能 是 对 表单 元 素 中 的 内 
容 进 行 分 组 ， 生 成 一 组 相关 的 表单 元 素 。 

在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 击 【 域 集 】 按钮 。 然后， 在 弹出 的 【 域 集 】 
对 话 框 中 输入 标签 名 称 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 图 6-8 所 示 。 

此 时 ， 在 表单 中 可 以 看 到 一 个 “基本 信息 ”的 边框 ， 用 户 可 在 边框 内 添加 基本 信息 
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的 表单 元 素 内 容 ， 如 图 6-9 所 示 。 
| 全 [| RH] 


























司 : ldoctype hm 括 人 
2 <hmt> 
弹 : <-head> 和 记名 | 可 交 
别 4 “meta © #8 
5 <title» 无 标题 文 拍 </title> 属于 …………， - 
/tess 国 因 QD 单 击 














站 
下 






































fi [开本 信息 ] 回 | 
了 姓名 : 
班级 : 
Cy) 和 
a 
I Eo tfornl BL om: 
和 图 6-8_, 插 入 域 集 和 图 6-9 ,最终 效果 


6.2 ”添加 文本 和 网 页 元 素 





文本 元 素 主 要 用 来 获取 文本 信息 的 表单 元 素 ， 而 网 页 元 素 则 是 用 来 显示 登录 密码 、 
搜索 对 象 、 电 子 邮 件 等 网 页 常用 对 象 。 


在 网 页 的 表单 中 ， 最 常见 的 即 为 文本 域 ， 通 过 文本 域 可 以 直接 获取 用 户 输入 的 各 种 
文本 信息 。 一 般 情况 下 ， 文 本 域 可 以 分 为 单行 文本 域 和 文本 区 域 等 。 


1. 添加 单行 文本 域 


在 网 页 中 选择 所 需 插入 单行 文本 域 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 
单 击 【 文 本 】 按 钮 。 此 时 ， 在 表单 域 中 将 显示 所 添加 的 文本 域 ， 且 在 文本 域 前 面 自动 添 
加 了 标签 内 容 ， 如 图 6-10 所 示 。 

选择 文本 域 ， 根 据 设计 需求 更 改 前 面 的 文本 内 容 ， 同 时 可 以 在 【属性 】 面 板 中 设置 
文本 域 的 属性 ， 如 图 6-11 所 示 。 



































在 图 6-10 ,添加 文本 域 在 了 图 6-11 ,设置 文本 域 属性 
在 文本 域 的 【属性 】 面 板 中 ， 主 要 包括 表 6-2 中 的 一 些 选项 。 








3 表 6-2 ,属性 选项 及 功能 
名 称 功 能 
a 文本 域名 称 是 程序 处 理 数据 的 依据 ， 命 名 与 文本 域 收集 信息 的 内 容 相 一 
0 致 。 文 本 域 尽量 使 用 英文 名 称 
Max Length (最 多 字符 数 ) ”| 设置 文本 框 内 所 能 填写 的 最 多 字符 数 











Size (字符 宽度 ) 设置 此 域 的 宽度 有 多 少 字 符 ， 默 认为 24 个 字符 的 长 度 

Value〔 初 始 值 ) 为 默认 状态 下 填写 在 单行 文本 框 中 的 文字 

Title 说 明文 字 ) 用 于 描述 当前 内 容 无 法 显示 时 ， 所 使 用 的 文字 提示 内 容 

Place Holder (期 望 描述 ) 对 表单 元 素 所 期 望 达 到 的 效果 进行 描述 

Disabled (禁用 ) 表单 中 的 某 个 表单 域 被 设 定 为 Disabled， 则 该 表单 域 的 值 就 不 会 被 提交 
> 表单 文本 域 是 必 填 项 ， 提 交 表单 时 ， 若 此 文本 域 为 空 ， 那 么 将 提示 用 户 

Required( 必 填 ) 输入 后 提交 





Auto Complete 自动 完成 ) ”| 当 用 户 启动 该 选项 时 ， 表 单元 素 将 对 输入 过 的 内 容 进行 自动 提示 功能 


Auto Focus 《 御 动 对 焦 ) 当 页 面 加 载 时 ， 该 属性 使 答 入 焦点 移动 到 一 个 特定 的 输入 字段 汉 
Read Only (只 读 ) 不 允许 用 户 修改 操作 ， 不 影响 其 他 的 任何 操作 章 
Fom (表单 ) 选择 当前 文档 中 需要 操作 的 表单 可 
Pattem (模式 ) Pattem 属性 规定 用 于 验证 输入 字段 的 模式 。 模 式 指 的 是 正则 表达 式 页 
Tab Index (序列 定义 Tab 键 的 选择 序列 和 
List (列表 ) 定义 与 该 文本 域 进行 关联 的 列表 


2. 添加 文本 区 域 


在 Dreamweaver 中 ， 用 户 可 以 使 用 文本 区 域 对 象 ， 来 获取 网 页 中 较 多 的 文本 信息 。 
文本 区 域 是 文本 域 的 一 种 变形 , 不 
仅 可 以 显示 位 于 多 行 的 文本 , 而 且 
还 可 以 通过 滚动 条 组 件 , 实现 拖 动 
查看 输入 内 容 的 功能 。 

在 网 页 中 选择 所 需 插入 文本 
区 域 的 位 置 ， 在 【插入 】 面板 中 的 
【表单 】 选 项 卡 中 单 击 【文本 区 域 】 
按钮 , 即 可 在 表单 中 插入 一 个 文本 
区 域 ， 如 图 6-12 所 示 。 

选择 插入 的 文本 区 域 对 象 , 可 人 了 图 6-12 。 添 加 文本 区 域 
以 在 【属性 】 面 板 设置 文本 区 域 的 
属性 。 其 属性 与 单行 文本 域 的 属性 十 分 类 似 ， 用 户 只 需 修改 Rows( 行 数 )、Cols (一 行 
文本 的 字数 )， 以 及 设置 Wrap (文本 方式 ) 属性 ， 设 置 提交 的 文本 区 域内 容 是 否 换行 操 
作 等 ， 如 图 6-13 所 示 。 
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和 图 6-13 【属性 】 面 板 
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在 网 页 中 ， 表 单 中 除了 文本 区 域 和 文本 域 之 外 ， 还 包含 非常 多 的 网 页 元 素 ， 如 密码 
框 、 地 址 栏 、 电 话 、 搜 索 等 。 


1. 添加 表单 密码 


在 创建 登录 页 面 时 ， 需 要 创建 一 个 密码 文本 域 ， 以 方便 用 户 通过 网 站 验证 获取 所 使 
用 的 网 页 权限 。 密 码 类 型 的 文本 域 与 
其 他 文本 域 在 形式 上 是 一 样 的 ,用 户 尹 
在 向 文本 域内 输入 内 容 时 ,密码 类 型 | 
的 文本 域 则 不 显示 输入 的 实例 内 容 ， 
只 显示 输入 的 位 数 。 

在 网 页 中 选择 所 需 插入 表单 密 
码 的 位 置 ,在 【插入 】 面 板 中 的 【 表 下 
单 】 选 项 卡 中 单 击 【密码 】 按钮 , 即 
可 在 表单 指定 的 光标 位 置 插入 该 文 [了 图 6-14 ,插入 密码 表单 
本 域 对 象 , 该 文本 域 对 象 会 在 对 象 前 
面 自动 显示 “Password:” 名 称 ， 如 图 6-14 所 示 。 


2. 添加 URL 对 象 
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URL 对 象 用 于 包含 URL 地 址 的 输入 域 。 当 用 户 提交 表单 时 ， 系 统 会 自动 验证 URL 
域 的 值 是 否 为 正确 的 格式 。 

在 网 页 中 选择 所 需 插 入 URL 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 
单 击 Url 按钮 ， 即 可 插入 一 个 URL 对 象 ， 如 图 6-15 所 示 。 

URL 类 型 只 验证 协议 ， 不 验证 有 效 性 。 当 用 户 直 接 输入 内 容 时 ， 它 会 自动 添加 
“http:/” 头 协议 。 例 如 ， 在 【URL:】 文 本 框 中 ， 输 入 “baidu.com.cn” 内 容 ， 如 图 6-16 
所 示 。 


各 

















| 
| 
| 
目 | 
《 了 图 6-15_ 插入 URL 《了 图 6-16_ 输 入 URL 地 址 


此 时 ， 当 鼠标 离开 文本 框 时 ， 系 统 将 在 内 容 前 面 自 动 添加 “http/” 头 协议 ， 如 图 
6-17 所 示 。 





3. 添加 Tel 对 象 


Tel 对 象 明 面 上 是 要 求 输入 一 个 电话 号 码 ， 但 实际 上 它 与 文本 域 没 太 大 区 别 ， 并 不 
存在 特殊 的 验证 。 

在 网 页 中 选择 所 需 插 入 Tel 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 
击 Tel 按钮 ， 即 可 插入 一 个 Tel 对 象 ， 如 图 6-18 所 示 。 
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日 ea ivempoo ER 
和 图 6-17 ,显示 URL 头 协议 和 图 6-18 ,插入 Tel 表单 
4. 添加 搜索 对 象 


搜索 对 象 是 专门 为 搜索 引擎 输入 关键 字 而 定义 的 文本 框 ， 它 与 Tel 对 象 一 样 ， 没 有 
特殊 的 验证 规则 。 

在 网 页 中 选择 所 需 插入 搜索 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 
击 【搜索 】 按 钮 ， 即 可 插入 一 个 搜索 对 象 ， 如 图 6-19 所 示 。 

添加 搜索 对 象 后 ， 浏 览 网 页 时 ， 用 户 可 以 在 浏览 器 中 看 到 “Search:” 框 。 在 该 文本 
框 中 输入 搜索 内 容 后， 在 文本 框 的 后 面 将 显示 一 个 【关闭 】 符 号 x 。 此 时 ， 如 果 用 户 单 
击 该 【关闭 】 符 号 ， 则 可 以 清除 框 中 所 输入 的 搜索 内 容 ， 如 图 6-20 所 示 。 
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和 图 6-19 ,插入 搜索 对 象 
5. 添加 数字 对 象 


在 HIML5 之 前 ， 如 果 用 户 想 输入 数字 的 话 ， 只 能 通过 文本 域 来 实现 。 并 且 ， 还 需 
要 用 户 通过 代码 进行 验证 内 容 ， 并 转换 格式 等 。 但 有 了 【数字 】 类 型 时 ， 用 户 可 以 非常 
方便 地 添加 包含 数值 的 输入 域 。 用 户 还 能 够 设 定 对 所 接受 的 数字 的 限定 ， 例 如 限定 允许 
范围 内 的 最 小 值 、 最 大 值 等 。 
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在 网 页 中 选择 所 需 插入 数字 对 
象 的 位 置 ,在 【插入 】 面板 中 的 【 表 
单 】 选 项 卡 中 单 击 【数字 】 按钮 ， 月 | 
即 可 插入 一 个 数字 对 象 ， 如 图 6-21 局; 
所 示 。 | 

插入 数字 对 象 之 后 ， 选 择 该 对 
象 ， 则 可 以 在 【属性 】 面 板 中 设置 
数字 限定 属性 ， 其 【属性 】 面 板 各 
选项 和 值 的 属性 描述 如 表 6-3 所 示 。 
5 表 6-3 。 数字 属 性 、 值 及 描述 

















在 最 新 版 的 Dreamweaver 中 ， 新 增加 了 对 日 期 和 时 间 进 行 操作 的 表单 对 象 。 用 户 可 
以 分 别 单独 地 添加 月 、 周 、 日 、 时 间 等 对 象 内 容 。 


本 二 


在 Dreamweaver 中 ,添加 月 ~ 
对 象 即 在 网 页 中 显示 一 个 月 选择 目 ; 
器 ， 而 添加 周 对 象 即 在 网 页 中 显 
示 一 个 周 选择 器 。 

1. 添加 月 对 象 


在 网 页 中 选择 所 需 插 入 月 对 
象 的 位 置 ， 在 【插入 】 面 板 中 的 
【表单 】 选 项 卡 中 单 击 【月 】 按 ff 了 图 6-22 插入 月 对 象 
钮 ， 即 可 插入 一 个 月 对 象 ， 如 图 
6-22 所 示 。 

插入 月 对 象 之 后 ， 在 网 页 中 所 显示 的 月 对 象 为 一 个 文本 域 ， 但 是 在 浏览 器 中 月 对 象 











显示 为 “---- 年 -月 ”内 容 ， 如 图 6-23 所 示 。 
此 时 ， 在 浏览 器 中 单 击 月 对 象 中 的 下 拉 按钮 ， 即 可 弹出 日 期 选择 器 ， 方 便 用 户 选择 
相应 的 月 份 ， 如 图 6-24 所 示 。 
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和 图 6-23 ,月 份 显示 月 对 象 和 图 6-24 ,月 份 效 果 展 示 


2. 添加 周 对 象 


在 网 页 中 选择 所 需 插入 周 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 击 
【 周 】 按 钮 ， 即 可 插入 一 个 周 对 象 ， 如 图 6-25 所 示 。 

插入 周 对 象 之 后 ， 在 网 页 中 所 显示 的 周 对 象 为 一 个 文本 域 ， 但 是 在 浏览 器 中 周 对 象 
显示 为 “---- 年 第 -- 周 ”内 容 。 此 时 ， 在 浏览 器 中 单 击 周 对 象 中 的 下 拉 按 钮 ， 即 可 弹出 周 
选择 器 ， 用 于 方便 用 户 选 择 相应 的 周 信 息 ， 如 图 6-26 所 示 。 
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在 Dreamweaver 中 ， 日 期 时 间 对 象 包括 “日 期 对 象 ”““ 时 间 对 象 ”“ 日 期 时 间 对 象 ” 
“本 地 日 期 时 间 对 象 ”4 种 网 页 元 素 。 


1. 日 期 对 象 


在 网 页 中 插入 日 期 对 象 后 ， 会 显示 一 个 日 期 选择 器 。 
在 网 页 中 选择 所 需 插入 日 期 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 
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击 【 日 期 】 按 钮 ， 即 可 插入 一 个 日 期 对 象 ， 如 图 6-27 所 示 。 

此 时 ， 用 户 可 以 在 浏览 器 查看 到 “Date: ”对 和 象 内 容 ， 并 在 文本 框 中 显示 “年 /月 /日 ” 
信息 。 单 击 后 面 的 下 拉 按 钮 ， 即 可 弹出 日 期 选择 器 ， 以 方便 用 户 选择 相应 的 日 期 ， 如 图 
6-28 所 示 。 








[GE 7 本 一口 X 























二 C 全 品 ile///Dsites/ 末 命名 站 志 %202/Un 少 | v 图 -二 上 3QL 
a A 冰 BB - DR - 固 本 # - 闪 站 Ht ,月 好 有 管家 
piefs 他 下 C2 | 
psto: [EA 加 "| 人 显示 

2015 年 04 月 国 固 固 

CS | 

全 到 

和 

本 

20 2 22 23 24 25 26 

27 28 29 0 | 
本体 站、 学 TP EW Qo 

和 _ 图 6-27 插入 日 期 对 象 和 |_ 图 6-28 日 期 效果 展示 


2. 时 间 对 象 


在 网 页 中 插入 时 间 对 象 后 ， 会 显示 一 个 时 间 选 择 器 。 在 网 页 中 选择 所 需 插入 时 间 对 
象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 击 【时 间 】 按 钮 ， 即 可 插入 一 个 时 
间 对 象 ， 如 图 6-29 所 示 。 

用 户 可 以 通过 浏览 器 显示 所 插入 的 时 间 对 象 ， 并 在 页 面 中 显示 “--:--” 内 容 。 此 时 ， 
用 户 可 通过 单 击 微调 按钮 ， 来 调整 网 页 时 间 ， 如 图 6-30 所 示 。 
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和 | 图 6-29 ,插入 时 间 对 象 和 图 6-30 。 时 间 效果 展示 








3. 日 期 时 间 对 象 


在 网 页 中 插入 日 期 时 间 对 象 后 ， 会 显示 一 个 包含 时 区 的 完整 的 日 期 时 间 选 择 器 。 在 
网 页 中 选择 所 需 插 入 日 期 时 间 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 击 
【日 期 时 间 】 按 钮 ， 即 可 插入 一 个 日 期 时 间 对 象 ， 如 图 6-31 所 示 。 


此 时 ， 在 浏览 器 中 ， 用 户 可 以 看 到 日 期 时 间 对 象 类 似 于 一 个 文本 域 ， 直 接 在 文本 框 
中 输入 日 期 和 时 间 内 容 即 可 ， 如 图 6-32 所 示 。 
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和 |_ 图 6-31 ,插入 日 期 时 间 对 象 在 了 图 6-32 日 期 时 间 效果 展示 


4. 本 地 日 期 时 间 对 象 


在 网 页 中 插入 本 地 日 期 时 间 对 象 后 ， 会 显示 一 个 不 包含 时 区 的 完整 的 日 期 时 间 选 
择 器 。 

在 网 页 中 选择 所 需 插 入 本 地 日 期 时 间 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 
项 卡 中 单 击 【日 期 时 间 〈 当 地 )】 按 钮 ， 即 可 插入 一 个 本 地 日 期 时 间 对 象 ， 如 网 6-33 
所 示 。 

此 时 ， 通 过 浏览 器 可 以 看 到 ， 在 网 页 中 所 显示 的 日 期 时 间 ( 当 地) 对象 为 一 个 选择 
器 。 单 击 其 后 的 下 拉 按钮 ， 即 可 选择 日 期 内 容 ， 并 通过 微调 按钮 来 设置 当前 的 时 间 ， 如 
图 6-34 所 示 。 
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用 了 图 6-33 插入 本 地 日 期 时 间 对 象 和 图 6-34 本 地 日 期 时 间 效果 展示 


添加 选择 与 按钮 元 素 





多 数 用 户 都 知道 ， 在 网 页 中 除了 一 些 输入 文本 、 日 期 或 时 间 外 ， 还 包含 很 多 选择 项 
和 按钮 ， 如 单 选 按钮 、 多 选项 、 提 交 按 钮 等 。 下 面 ， 将 详细 介绍 在 网 页 中 添加 选择 与 按 
钮 元 素 的 操作 方法 。 
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入 


选择 元 素 主要 用 于 选择 网 页 内 容 ， 包 括 选择 对 象 、 单 选 按 钮 、 单 选 按钮 组 、 复 选 框 、 


1. 选择 对 象 


选择 对 象 主要 是 以 下 拉 列 表 的 方法 来 显示 多 种 选项 ， 它 以 滚动 条 的 方式 ， 在 有 限 的 
空间 中 尽量 提供 更 多 选项 ， 非 常 节省 版 面 。 

在 网 页 中 选择 所 需 插 入 选择 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 
击 【 选 择 】 按 钮 ， 即 可 插入 一 个 选择 对 象 ， 如 图 6-35 所 示 。 

插入 选择 对 象 后 ， 选 择 该 对 象 ， 在 【属性 】 面 板 中 单 击 【列表 值 】 按 钮 。 然 后 ， 在 





弹出 的 【列表 值 】 对 话 框 中 输入 项 目 列表 ， 并 通过 单 击 四 按钮 ， 来 增加 列表 项 ， 最 后 单 
击 【 确 定 】 按 钮 即 可 ， 如 图 6-36 所 示 。 
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此 时 , 用 户 按 下 F12 键 , 即 可 通过 
浏览 器 来 查看 下 拉 列 表 的 最 终 效果 , 单 
击 下 拉 按 钮 , 即 可 在 弹出 的 下 拉 列 表 中 
选择 相应 的 选项 ， 如 图 6-37 所 示 。. 
另外 ， 选 择 选择 对 象 ， 在 【属性 】 在 了 图 6-37 。 选 择 对 象 效果 展示 
面板 中 启用 Multiple 复 选 框 , 即 可 将 下 
拉 列 表 更 改 为 列表 选项 ， 如 图 6-38 所 示 。 


此 时 ， 在 浏览 器 中 ， 用 户 将 发 现 所 创建 的 下 拉 列 表 将 自动 更 改 为 列表 形式 ， 并 显示 
所 有 的 列表 选项 ， 如 图 6-39 所 示 。 
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2. 单 选 按 钮 





捷 区 jn 器 炎 下 载 证 处 0) Qi100% 4 


单 选 按钮 也 是 一 种 选择 性 表单 Sn 
对 象 ， 它 以 组 的 方式 出 现 ， 只 允许 全 生生 下 这 
用 户 同时 选中 其 中 一 个 单 选 按钮 。 当 用 户 选 中 某 一 个 单 选 按钮 ， 其 他 单 选 按钮 将 自动 转 
换 为 未 选中 的 状态 。 

在 网 页 中 选择 所 需 插入 单 选 按钮 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 
中 单 击 【 单 选 按钮 】 按 钮 ， 即 可 插入 一 个 单 选 按钮 对 象 ， 如 图 6-40 所 示 。 

此 时 ， 选 中 单 选 按钮 后 面 的 文本 ， 更 改 文 本 内 容 。 同 时 使 用 该 方法 插入 多 个 单 选 按 





和 图 6-40 ,插入 单 选 按钮 
在 网 页 中 选择 单 选 按钮 中 的 “ 圆 点 ”符号 ， 然 后 在 【属性 】 面 板 中 启用 Checked 复 





了 图 6-42 设置 属性 








3. 单 选 按钮 组 












































th ro mE 
在 网 页 中 选择 所 需 插 入 单 选 按钮 组 对 象 的 “sa + 一 EE] 二 

位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 可 可 

单 击 【 单 选 按钮 组 】 按 钮 。 然 后 ， 在 弹出 的 【 单 




















选 按钮 组 】 对 话 框 中 设置 相应 选项 ， 单 击 【 确 而 man ce 





定 】 按 钮 即 可 ， 如 图 6-43 所 示 。 人 
在 【 单 选 按钮 组 】 对 话 框 中 ， 主 要 包括 表 
6-4 中 的 一 些 选项 。 了 图 6-43 【 单 选 按钮 组 】 对 话 框 


322 表 6-4_， 单 选 按钮 组 选项 及 作用 
选 项 作 用 

名 称 用 于 设置 单 选 按钮 组 的 名 称 

单 远 按 包 后 的 文本 标 和 

在 选中 该 单 选 按钮 后 提交 给 服务 器 程序 的 值 
| 本 | RE 反 仙 

了 和 按 生 | 国有 册 除 当 前 选择 的 单 过 技 休 

| 同 | 将 要 疝 站 择 的 单 选 按钮 上 移 一 个 位 置 

将 当前 选择 的 单 选 按钮 下 移 一 个 位 置 

定义 多 个 单 选 按 包 间 以 换行 符 分 隔 

定义 多 个 单 选 按钮 通过 表格 进行 布局 


4. 复 选 杠 


复 选 框 是 一 种 允许 用 户 同 时 选择 多 项 内 容 的 选择 性 表单 对 象 ， 它 在 浏览 器 中 以 矩形 
框 进行 表示 。 插 入 复 选 框 时 ， 用 户 可 以 先 插入 一 个 域 集 ， 再 将 复 选 框 或 者 复 选 框 组 插入 
到 域 集中 ， 以 表示 为 这 些 复 选 框 添加 标题 信息 。 

在 网 页 中 选择 所 需 插 入 复 选 框 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 
单 击 【 复 选 框 】 按 钮 ， 即 可 插入 一 个 复 选 杠 对象， 如 图 6-44 所 示 。 

插入 复 选 框 之 后 ， 可 在 【属性 】 面 板 中 通过 启用 Checked 复 选 框 的 方法 ， 使 当前 所 
选 复 选 框 变 为 默认 选择 状态 ， 如 图 6-45 所 示 。 
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和 图 6-44 插入 复 选 框 对 象 和 | 图 6-45 设置 对 象 属性 


5. 复 选 框 组 
复 选 框 组 与 单 选 按钮 组 在 设置 上 是 类 似 的 ， 其 两 者 的 区 别 在 于 : 单 选 按钮 组 中 只 能 





选择 一 个 选项 ， 而 复 选 框 组 中 可 以 选择 多 个 选项 或 者 全 部 选项 。 

首先 ， 在 网 页 中 选择 所 需 插入 域 集 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 
单 击 【 域 集 】 按 钮 。 在 弹出 的 【 域 集 】 对 话 框 中 输入 标签 文本 ， 并 单 击 【和 确定】 按钮 ， 
如 图 6-46 所 示 。 

然后 ， 将 光标 定位 在 域 集中 ， 在 【插入 】 面 板 中 的 【表单 】 选 项 卡 中 单 击 【 复 选 框 
组 】 按 钮 。 在 弹出 的 【 复 选 框 组 】 对 话 框 中 设置 相应 选项 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 
图 6-47 所 示 。 





























和 图 6-46 ,插入 域 集 对 象 和 图 6-47 。【 复 选 框 组 】 对 话 框 


此 时 , 在 文档 中 , 用 户 可 以 看 到 以 换行 符 方式 显示 一 组 复 选 框 内 容 , 如 图 6-48 所 示 。 
按 下 Fl12 快捷 键 之 后 ， 用 户 可 在 浏览 器 中 查看 复 选 框 组 对 象 的 最 终 状 态 ， 并 通过 勾 
选 选项 来 体验 复 选 框 组 的 功能 ， 如 图 6-49 所 示 。 
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和 图 6-48 ,显示 复 选 框 内 容 和 图 6-49 。 复 选 框 组 最 终 效果 
提 ” 示 


在 表单 中 录入 内 容 后 ， 用 户 需 要 单 击 表单 中 的 按钮 ， 才 可 以 将 表单 中 所 填写 的 信息 
发 送 到 服务 器 。 而 在 网 页 中 ， 按 钮 包含 有 普通 按钮 、【 提 交 】 按 钮 、【 重 置 】 按 钮 和 图 像 
按钮 。 
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1. 添加 普通 按钮 


在 纯 文本 类 型 的 表单 按钮 中 ， 可 以 分 为 button 和 submit 两 种 类 型 ,而 普通 的 按钮 则 
为 button 类 型 。 在 网 页 中 选择 所 需 插入 普通 按钮 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【 表 
单 】 选 项 卡 中 单 击 【按钮 】 按 钮 ， 即 可 插入 一 个 普通 按钮 对 象 ， 如 图 6-50 所 示 。 

然后 ， 将 视图 切换 到 【 拆 分 】 视 图 中 ， 在 【代码 】 视 图 部 分 中 查看 当前 所 添加 的 按 
钮 类 型 ， 如 “type="button"” 内 容 ， 如 图 6-51 所 示 。 





和 图 6-50 ,插入 【提交 】 按 钮 和 图 6-51 ,查看 【提交 】 按 钮 代码 


2. 添加 【提交 】 按 钮 


submit 类 型 的 按钮 可 以 提交 表单 ， 所 以 称 为 【提交 】 按 钮 。 而 button 类 型 的 按钮 需 
要 绑 定 事件 才 可 以 使 用 提交 数据 。 
在 网 页 中 选择 所 需 插入 【提交 】 按 钮 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 
项 卡 中 单 击 【“ 提 交 ” 按 钮 】 按 钮 ， 即 可 插入 一 个 【提交 】 按 钮 对 象 ， 如 图 6-52 所 示 。 
用 户 从 外 观 上 看 ， 这 两 个 按钮 没有 什么 区 别 ， 但 在 【代码 】 视 图 中 可 以 看 到 两 者 之 
间 类 型 不 同 。 当 用 户 在 单 击 【“ 提 交 ” 按 钮 】 按 钮 时 ， 其 所 插入 的 按钮 类 型 为 submit 类 
型 ， 如 图 6-53 所 示 。 











和 图 6-52 插入 【提交 】 按 钮 和 图 6-53 查看 【提交 】 按 钮 代码 


submit 类 型 的 按钮 并 不 是 万 能 的 ， 在 某 些 情况 下 使 用 button 绑 定 事件 比 使 用 submit 
类 型 的 按钮 具有 更 好 的 效果 。 例 如 ， 当 用 户 想 要 在 页 面 中 实现 局 部 刷新 时 ， 直 接 使 用 
button 绑 定 事件 就 可 以 了 。 但 在 使 用 button 绑 定 事件 时 ， 当 用 户 触发 事件 的 同时 会 自动 
提交 表单 。 相 比 之 下 ，submit 只 要 在 需要 表单 提交 时 才 会 带 有 数据 ， 而 button 默认 情况 














下 是 不 提交 任何 数据 的 。 

3. 添加 【 重 置 】 按 钮 

在 网 页 中 选择 所 需 插入 【 重 置 】 按 钮 对 象 的 位 置 ， 在 【插入 】 面 板 中 的 【表单 】 选 
项 卡 中 单 击 【“ 重 置 ”按钮 】 按 钮 ， 即 可 插入 一 个 【 重 置 】 按 钮 对 象 ， 如 图 6-54 所 示 。 

网 页 中 的 【 重 置 】 按 钮 ， 主 要 用 于 清除 表单 中 的 设置 ， 方 便 用 户 一 次 性 删除 所 有 的 
输入 内 容 。 该 按钮 常用 于 制作 登录 功能 ， 如 图 6-55 所 示 。 
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4. 添加 图 像 按 钮 


图 像 按 钮 主要 用 于 提交 表单 ， 
如 果 使 用 图 像 来 执行 任务 而 不 是 
提交 数据 , 则 需要 将 某 种 行为 附加 | 过 essa 站 人 的 和 | 四 过 择 
到 表单 对 象 。 oi Ea 

在 网 页 中 选择 所 需 插入 图 像 
按钮 对 象 的 位 置 ， 在 【插入 】 面 板 
中 的 【表单 】 选 项 卡 中 单 击 【图 像 
按钮 按钮。 在 弹出 的 【选择 图 像 
源 文件 】 对 话 框 中 选择 一 个 图 像 文 
件 ， 单 击 【确定 】 按 钮 即 可 ， 如 图 《7 图 6-56 【选择 图 像 源 文件 】 对 话 框 
6-56 所 示 。 
此 时 ， 在 文档 中 ， 将 显示 所 插入 的 图 像 ， 用 户 通过 浏览 器 可 以 查看 该 图 像 为 按钮 方 
法 。 另 外 , 选择 该 图 像 ， 则 可 以 在 【属性 】 面 板 中 设置 图 像 按钮 的 属性 ， 如 图 6-57 所 示 。 
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和 图 6-57 。【 属 性】 面板 





其 中 ,【 属 性 】 面 板 中 ， 各 选项 的 具体 含义 ， 如 表 6-5 所 示 。 
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52 表 6-5 ,【 属 性】 选项 及 作用 
选 项 ;| 
Name (图 像 名 称 ) 用 于 设置 图 像 的 名 称 
Src ( 源 文件 ) 指定 要 为 该 按钮 使 用 的 图 像 
Form Action (提交 执行 动作 ) | 用 户 可 以 设置 该 按钮 提交 时 ， 可 以 执行 的 其 他 操作 
W ( 宽 ) 设置 图 像 的 宽度 
H (高 ) 设置 图 像 的 高 度 


Form Enc Type (编码 类 型 ) 


可 以 选择 表单 提交 时 ， 数 据 传输 的 类 型 





Form No Validate (取消 验证 ) 


启用 该 复 选 框 后 ， 禁 止 对 表单 中 的 数据 进行 验证 





编辑 图 像 启动 默认 的 图 像 编辑 器 ， 并 打开 该 图 像 文件 以 进行 编辑 
Class (类 ) 使 用 户 可 以 将 CSS 规则 应 用 于 对 象 
Disabled (禁用 ) 表单 中 的 某 个 表单 域 被 设 定 为 Disabled, 则 该 表单 域 的 值 就 不 会 被 提交 





Auto Focus〔 自动 对 焦 ) 


当 页 面 加 载 时 ， 该 属性 使 输入 焦点 移动 到 一 个 特定 的 输入 字段 


习 : 制作 注册 页 面 


互联 网 上 存在 大 量 的 表单 ， 





以 方便 网 站 收集 用 户 信息 。 除 了 收集 信息 之 外 ， 有 的 表 


单 还 具有 搜索 功能 ， 从 而 实现 全 方位 的 服务 功能 。 表 单 是 互联 网 上 实现 用 户 同 服务 器 进 


行 信息 交流 的 主要 工具 ， 在 本 


操作 方法 ， 如 图 6-58 所 示 。 





练习 中 将 通过 制作 一 个 注册 页 面 ， 来 详细 介绍 制作 表单 的 
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电话 号 码 
i 影 妆 
出 生日 期 男装 
所 在 地 区 去 家 
联系 地 址 b= ee 
地 下 编码 
验证 如 


E33 [本 




















6-58 ,注册 页 面 


操作 步骤 : 
打开 素材 页 面 “index.html” 


， 选 择 “在 此 添 


所 示 。 


加 表单 ”文本 ， 删 除 该 文本 ， 如 图 6-59 











和 | 图 6-59 删除 多 余 文 本 





在 【插入 】 面板 中 ， 单 击 【 表单 ] 按钮 ， 插 
入 一 个 表单 元 素 ， 如 图 6-60 所 示 。 














6-60 ,插入 表单 


将 光标 定位 在 表单 中 ， 执 行 【 插 入 】|【 表 
格 】 命令 ， 插 入 18 行 2 列 ， 宽度 为 “600 
像素 ”， 间 距 为 “1” 的 表格 ， 如 图 6-61 
所 示 。 





















































6-61 ,插入 表格 


合并 第 1 行 中 的 单元 格 , 输入 文本 , 将 字体 
设置 为 粗 体 ， 并 调整 段落 缩 进 ， 如 图 6-62 
所 示 。 

选择 第 1 行 ， 将 【背景 颜色 】 设 置 为 











“#7f7f7”, 将 [ 高 ] 设 置 为 “40”, 如 图 6-63 
所 示 。 
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和 图 6-63 ,设置 第 1 行 单元 格 


图 选择 第 2~18 行 第 1 列 ， 将 【背景 颜色 ] 设 
置 为 “#f7f7f7”, 设置 [水平 ]【 宽 ] 和 [高 】 





参数 ， 并 输入 相应 文本 ， 如 图 6-64 所 示 。 
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和 图 6-64 ,设置 第 1 列 单 元 格 





选择 第 2~18 行 的 第 2 列 ， 将 【背景 颜色 】 
设置 为 “#FFFFFF”， 将 【垂直 】 设置 为 【 居 
中 】 将 【 宽 】 设 置 为 “477”"， 如 图 6-65 
所 示 。 

图 光标 置 于 第 2 行 第 2 列 单元 格 中 , 单 击 【 插 
入 】 面板 中 的 【文本 】 按钮 ， 删 除 按钮 文本 
并 设置 其 属性 ， 如 图 6-66 所 示 。 使 用 同样 
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方法 ， 插 入 其 他 【文本 】 按钮 。 








其 | 无 > 

让 

ur [wm] 
(Ee 3 





en NC | 
上 | [me 


口 peabed DReawed GE 


口 AtoFoas 口 Readony 











和 图 6-66 插入“ 文本” 元素 





图 在 文本 框 后 面 添 加 多 个 空格 ， 单 击 【 插 入 】 
面板 中 的 【 按钮 ] 按钮 ， 插 入 按钮 并 设置 其 
属性 ， 如 图 6-67 所 示 。 




















和 图 6-67 ,插入 【检测 账号 】 按 钮 


光标 置 于 第 3 行 第 2 列 单元 格 中 , 单 击 【 插 
入 】 面 板 中 的 【 密码 】 按钮 ， 删 除 按钮 文本 
并 设置 其 属性 ， 如 图 6-68 所 示 。 使 用 同样 
方法 ， 插 入 其 他 【 密码 ] 按钮 。 

光标 置 于 第 5 行 第 2 列 单元 格 中 , 单 击 【 插 
入 】 面板 中 的 【 选择 】 按钮 ， 删 除 文本 并 设 
置 其 属性 ， 如 图 6-69 所 示 。 



































和 


De DReqwed Form mi 











和 图 6-69 ,插入 “选择 ”元 素 





在 【属性 】 面板 中 , 单 击 【列表 值 ] 按钮 , 设 
置 选择 列表 , 并 单 击 [ 确定 ] 按 钮 , 如 图 6-70 
所 示 。 使 用 同样 方法 ， 设 置 其 他 选择 列表 。 











和 | 图 6-70 ,设置 选择 列表 


在 【电子 邮件 】 行文 本 框 右 侧 添加 空格 ， 单 
击 【 插 入 】 面板 中 的 【 按钮 按钮， 插入 按 
钮 并 设置 其 属性 ， 如 图 6-71 所 示 。 
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和 图 6-71 ,插入 【检测 E-mail】 按钮 





光标 定位 在 按钮 右 侧 ， 单 击 【 插入 】 面板 中 
的 【 复 选 框 按钮 , 修改 文本 并 设置 其 属性 ， 
如 图 6-72 所 示 。 













































和 图 6-72 ,插入 复 选 框 


光标 定位 在 【 性 别 】 右 侧 的 单元 格 中 ， 单 击 
【插入 】 面 板 中 的 【 单 选 按钮 】 按钮 更改 
文本 并 设置 其 属性 ， 如 图 6-73 所 示 , 使 用 
同样 方法 ， 插 入 其 他 单 选 按钮 。 

光标 定位 在 最 后 一 行 的 第 2 列 中 , 单 击 【 插 
入 】 面板 中 的 【 提交 】 按钮, 并 设置 其 属性 ， 
如 图 6-74 所 示 。 使 用 同样 方法 ,插入 【 重 
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图 6-74 ,插入 【提交 】 按 钮 


党 练习 : 制作 在 线 调查 表 





互联 网 中 ， 为 了 获取 更 多 信息 ， 通 常会 放置 一 些 类 似 于 调查 表 的 网 页 ， 对 浏览 者 进 
行 简单 的 问卷 调查 。 在 本 练习 中 ， 将 运用 Dreamweaver 中 的 表单 功能 ， 详 细 介绍 制作 在 
线 调查 表 的 操作 方法 ， 如 图 6-75 所 示 。 








秋天 设计 


局 站 册页 ”企业 文化 。 关于 我 们 ”经 由 喜 创 ”服务 进 令 在 二 襄 戎 。 合 作 汉 程 联系 我 们 
厂 在 堵 讽 定 





4 Email 


5 我 们 提供 的 对 些 腿 务 还 未 蓄 达到 您 的 条 意 ? 
市 场 风 研 、 至 会 形象、 策划 
企业 桂 专 、 视 人 形象 识别 YS 系统 设计 











6-75 在 线 调查 表 


操作 步骤 : 
打开 素材 文件 “sucai.html”, 将 光标 置 于 ID 为 Container 的 层 中 , 执行 【插入 】IDiv 命令 ， 


157 





设置 ID, 单 击 【 确定 ] 按钮 ,如 图 6-76 所 示 。 
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6-76 ,插入 Div 层 





删除 Div 层 中 的 文本 ， 单 击 【 插 入 】 面板 中 的 
【表单 ] 按 钮 , 并 设置 其 属性 , 如 图 6-77 所 示 。 
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和 图 6-77_ 插 入 表单 


单 击 【插入 】 面板 中 的 【 域 集 ] 按钮 ， 在 弹 
出 的 【 域 集 】 对 话 框 中 输入 标签 名 称 , 单 击 
【确定 】 按钮， 如 图 6-78 所 示 。 
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换行 后 输入 “1. 调 查 对 象 ”文本 ， 选 择 文本 ， 
将 【 目标 规则 ] 设置 为 【 . 世 】 如 图 6-79 所 示 。 














和 图 6-79 ,设置 文本 属性 








单 击 【 插入 】 面板 中 的 【 单 选 按钮 组 ] 按钮 ， 
在 弹出 的 对 话 框 中 设置 单 选 按钮 标签 , 并 单 





击 【 确 定 】 按钮 ， 如 图 6-80 所 示 。 
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和 图 6-80 。 插 入 单 选 按钮 组 


回 调整 单 选 按钮 的 位 置 , 输入 文本 , 并 设置 文 
本 的 目标 规则 ， 如 图 6-81 所 示 。 
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和 图 6-81 ,调整 单 选 按钮 位 置 





单 击 【插入 】 面 板 中 的 【文本 ] 按钮 ， 并 在 
【属性 】 面板 中 设置 其 属性 ， 如 图 6-82 所 
示 。 使 用 同样 方法 ， 制 作 联系 人 和 E-mail 


























和 | 图 6-82 插入 “文本 ”元 素 





图 输入 问题 5 文本 并 设置 其 目标 规则 ， 单 击 
【插入 】 面 板 中 的 【 复 选 框 】 按钮 ， 插 入 元 
素 并 修改 元 素 文本 ， 如 图 6-83 所 示 。 使 用 
同样 方法 ， 插 入 其 他 复 选 框 。 
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6-83 ,插入 复 选 框 组 


加 输入 问题 6 文本 并 设置 其 目标 规则 ， 单 击 
【插入 】 面 板 中 的 【 单 选 按钮 组 】 按钮 ， 设 
置 单 选 选 项 ， 并 单 击 【 确定 】 按 钮 ， 如 图 
6-84 所 示 。 


ne fe 
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和 _ 图 6-84 添加 单 选 按钮 组 


调整 单 选 按钮 的 位 置 , 输入 问题 7 文本 并 设 
置 文本 的 目标 规则 ， 如 图 6-85 所 示 。 
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6-85 ,调整 单 选 按钮 位 置 


单 击 【 插 入 】 面 板 中 的 【 文本 区 域 】 按钮 ， 
插入 文本 区 域 元 素 并 设置 其 属性 ， 如 图 


6-86 所 示 。 








6-86 ,插入 文本 区 域 


单 击 【 插入 】 面板 中 的 【提交 】 按钮 ,插入 
【提交 】 按钮 并 设置 其 1D, 如 图 6-87 所 示 。 














图 6-87 ,插入 【提交 】 按 钮 


在 【 提交】 按钮 下 方 , 输入 备注 文本 并 保存 
网 页 文本 ， 如 图 6-88 所 示 。 


主 : 如 果 您 没有 留 下 您 的 胡 实 次 村 ,你 人 无法 束 得 此 交 i 查 所 赠礼 品 。 我们 不 合 世 
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和 图 6-88_ 输 入 备注 文本 


6.7 思考 与 练习 





1. 用 来 输入 密码 的 表单 域 是 8 
2. 当 表 单 以 电子 邮件 的 形式 发 送 ， 表 单 信 


息 不 以 附件 的 形式 发 送 ， 应 将 【MIME 类 型 】 设 
置 为 。 
3. 表单 对 象 的 名 称 由 属性 设 定 ; 
提交 方法 由 属性 指定 :车 要 提交 大 数 





局 淋 河 可 山口 潞 





据 量 的 数据 ， 则 应 采用 方法 ; 表单 提 
交 后 的 数据 处 理 程序 由 属性 指定 。 

4. 表单 是 和 之 间 
实现 信息 交流 和 传递 的 桥梁 。 

5. 表单 实际 上 包含 两 个 重要 组 成 部 分 : 一 
是 描述 表单 信息 的 ， 二 是 用 于 处 理 表 
单数 据 的 服务 器 端 ”  __。 


二 、 选 择 题 


1. 下 列 哪 一 项 表示 的 不 是 按钮 ? 
A. type="submit" 
B. type="reset" 
C. type="image" 
D. type="button" 
2. 如 果 要 表单 提交 信息 不 以 附件 的 形式 发 
送 ， 只 要 将 表单 的 【MTME 类 型 】 设 置 为 。 
A. text /plain 
B. password 
C. submit 
D. button 


三 、 问 答题 


1. 概述 文本 字段 与 文本 区 域 的 区 别 。 
2. 简单 介绍 复 选 框 的 作用 。 
3. 简单 介绍 文件 域 的 作用 。 


四 、 上 机 练习 





又 


1. 添加 域 集 

本 练习 中 ， 首 先 新 建 空白 文档 ， 执 行 【 插 入 】| 
【表单 】|【 域 集 】 命令 ， 在 弹出 的 【 域 集 】 对 话 
框 中 设置 【标签 】 选 项 ， 并 单 击 【 确 定 】 按 钮 。 
然后 ， 选 择 域 集 对 象 ， 在 【属性 】 面 板 中 设置 标 
题 文本 的 字体 格式 。 最 后 ， 在 “ 域 集 ” 表 单 中 插 
入 各 种 表单 对 象 ， 并 按 下 F12 键 预 览 最 终 效果 ， 
如 图 6-89 所 示 。 











3. 着 要 获得 名 为 ogin 的 表单 中 名 为 txtuser | sm 一- 一 
的 文本 输入 框 的 值 ， 以 下 获取 的 方法 中 ， 正 确 的 。 | sgn; 


D 
(=) 


8L 


ba 是 one 而 Tua SY 和 HH aw 2 
S A. username=login.txtuser.value 
版 B. usermame=document.txtuser.value 和 | 图 6-89 ,添加 域 集 

C. username=document.login.txtuser 


2. 添加 日 期 和 时 间 元 素 

在 本 练习 中 ， 首 先 新 建 空白 文档 , 单 击 【页 
面 属性 】 按钮 在 弹出 的 【页 面 属性 】 对 话 框 中 ， 
设置 页 面 背景 颜色 。 然 后 ， 在 文档 中 插入 一 个 域 
集 元 素 ， 同 时 在 表单 元 素 中 插入 一 个 日 期 和 时 间 
元 素 ， 并 修改 表单 元 素 内 的 文本 。 最 后 ， 在 其 下 
方 依次 插入 文本 、 密 码 、 电 子 邮 件 、【 提 交 】 按 
钮 和 【 重 置 】 按 钮 ， 如 图 6-90 所 示 。 


C. username=document.txtuser.value 
4. 若 要 产生 一 个 4 行 30 列 的 多 行文 本 域 ， 
以 下 方法 中 ， 正 确 的 是 __。 
A. <Input type="text" Rows="4" Cols= "30" 
Name="txtintrol"> 
B. <TextArea Rows="4" Cols="30" 
Name= "txtintro"> 
C. <TextArea Rows="4" Cols="30" 
Name="txtintro"></TextArea> 
D. <TextArea Rows="30" Cols="4" 
Name=" txtintro"></TextArea> 
5. 用 于 设置 文本 框 显示 宽度 的 属性 是 。 





A. Size 

B. MaxLength 

C. Value Es. 
D. Lenet 和 | 图 6-90 。 添 加 日 期 和 时 间 元 素 
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7.1 CSS 样式 概述 


CO a A TT) 








策划 导 司 灯 玫 沪 洁 悦 


嵌 托 新 


况 潍 1 


810Z) 


D 
SO 
De 
SO 
版 





的 应 用 。 
1. 关于 层 又 样式 表 


层 登 样式 表 (CSS) 是 一 组 格式 设置 规则 ， 用 于 控制 网 页 内 容 的 外 观 。 

通过 使 用 CSS 样式 设置 页 面 的 格式 , 可 将 页 面 的 内 容 与 表示 形式 分 离开 。 页 面 内 容 
( 即 HTML 代码 ) 存放 在 HIML 文件 中 , 而 用 于 定义 代码 表示 形式 的 CSS 规则 存放 在 另 
一 个 文件 (外 部 样式 表 ) 或 HTML 文档 的 另 一 部 分 (通常 为 文件 头 部 分 》 中 。 

将 内 容 与 表示 形式 分 离 可 使 得 从 一 个 位 置 集中 维护 站 点 的 外 观 变 得 更 加 容易 ， 因 为 
进行 更 改 时 无 须 对 每 个 页 面 上 的 每 个 属性 都 进行 更 新 。 

将 内 容 与 表示 形式 分 离 还 可 以 得 到 更 加 简练 的 HTML 代码 , 这 样 将 缩短 浏览 器 加 载 
时 间 ， 并 为 存在 访问 障碍 的 人 员 简 化 导航 过 程 。 

使 用 CSS 可 以 非常 灵活 并 更 好 地 控制 页 面 的 确切 外 观 。 使 用 CSS 可 以 控制 许多 文 
本 属性 ， 包 括 特定 字体 和 字 大 小 : 粗 体 、 斜 体 、 下 画 线 和 文本 阴影 ;文本 颜色 和 背景 颜 
色 ; 链接 颜色 和 链接 下 夯 线 等 。 通 过 使 用 CSS 控制 字体 ， 还 可 以 确保 在 多 个 浏览 器 中 
以 更 一 致 的 方式 处 理 页 面 布局 和 外 观 。 

除 设置 文本 格式 外 ,还 可 以 使 用 CSS 控制 网 页 面 中 块 级 别 元 素 的 格式 和 定位 。 块 级 
元 素 是 一 段 独立 的 内 容 , 在 HIML 中 通常 由 一 个 新 行 分 隔 , 并 在 视觉 上 设置 为 块 的 格式 。 
例如 ，<hl> 标 签 、<p> 标 签 和 <div> 标 签 都 在 网 页 面 上 产生 块 级 元 素 。 

2. 关于 CSS 规则 


CSS 格式 设置 规则 由 两 部 分 组 成 : 选择 器 和 声明 。 其 中 ， 选 择 器 主要 用 于 标识 已 设 
置 格式 元 素 的 术语 (如 p、hl、 类 名 称 或 人 D 等 名 称 )。 

而 声明 又 称 为 “声明 块 ” 用 于 定义 样式 属性 。 例 如 ， 在 下 面 的 CSS 代码 中 ，hl 是 
选择 器 ， 介 于 “大 括号 ”({)) 之 间 的 所 有 内 容 都 是 声明 块 : 


hl { font-size: 16 pixels; font-family: Helvetica; font-weight:bold; } 
在 声明 块 中 ， 又 包含 属性 (如 font-family) 和 值 (如 Helvetica) 两 部 分 组 成 。 
在 前 面 的 CSS 规则 中 , 已 经 为 <h1> 标 签 创建 了 特定 样式 : 所 有 链接 到 此 样式 的 <h1> 


标签 的 文本 的 【字号 】 为 16 像素 ;【 字 体 】 为 Helvetica;【 字 形 】 为 【 粗 体 】。 
样式 (由 一 个 规则 或 一 组 规则 决定 ) 














存放 在 与 要 设置 格式 的 实际 文本 分 离 的 位 地 点 安排 
署 。 因 此 ， 可 以 将 <h1> 标 签 的 某 个 规则 一 
次 应 用 于 许多 标签 。 通 过 这 种 方式 ，CSS | { 活动 安排 





font-family: Arial; 


可 提供 非常 便利 的 更 新 功能 。 若 在 一 个 位 font-elze:16px; | 上 Yee 


置 更 新 CSS 规则 ， 使 用 已 定义 样式 的 所 有 | } fentweignt bold; 
元 素 的 格式 设置 将 自动 更 新 为 新 样式 ， 如 [至 
图 7-1 所 示 。 ae 


用 户 可 以 在 Dreamweaver 中 定义 以 下 用 图 7-1 ,CSS 规则 
样式 类 型 : 


口 类 样式 ”可 以 让 样式 属性 应 用 于 页 面 上 的 任何 元 素 。 

口 HTML 标签 样式 ”重新 定义 特定 标签 的 格式 。 如 创建 或 更 改 <hl> 标 签 的 CSS 样 
式 时 ， 则 应 用 于 所 有 <hl> 标 签 。 

口 高 级 样式 ”重新 定义 特定 元 素 组 合 的 格式 ， 或 其 他 CSS 允许 的 选择 器 表单 的 格 
式 。 高 级 样式 还 可 以 重 定义 包含 特定 id 属性 的 标签 的 格式 。 





根据 CSS 样式 表 存 放 的 位 置 以 及 应 用 的 范围 ， 可 以 将 CSS 样式 表 分 为 3 种 ， 即 外 
部 CSS、 内 部 CSS 以 及 内 联 CSS 等 。 


1. 外 部 CSS 


外 部 CSS 是 一 种 独立 的 CSS 样式 。 其 一 般 将 CSS 代码 存放 在 一 个 独立 的 文本 文件 
中 ， 扩 展 名 为 “.css”。 这 种 外 部 的 CSS 文件 与 网 页 文档 并 没有 什么 直接 的 关系 。 如 果 需 
要 通过 这 些 文件 控制 网 页 文档 ， 则 需要 在 网 页 文档 中 使 用 link 标签 导入 。 

例如 ， 使 用 CSS 文档 来 定义 一 个 网 页 的 大 小 和 边 距 ， 代 码 如 下 。 





将 CSS 代码 保存 为 文件 后 , 即 可 通过 <link> 标 签 将 其 导入 到 网 页 文档 中 。 例如 , CSS 
代码 的 文件 名 为 “main.css”， 代 码 如 下 。 





在 外 部 CSS 文件 中 ， 通 常 需 要 在 文件 的 头 部 创建 CSS 的 文档 声明 ， 以 定义 CSS 文 
档 的 一 些 基本 属性 。 常 用 的 文档 声明 包括 6 种 ， 其 具体 情况 如 表 7-1 所 示 。 
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2 表 7-1 ee 
声明 类 型 声明 类 型 





导入 外 部 Ee -本 定义 嵌入 的 字体 ， 定 义 文件 
定义 当前 CSS 文件 的 字符 集 | @page | 定义 页 面 的 版 式 
@font-face | 定义 嵌入 HIML 文档 的 字体 定义 设备 类 型 


在 多 数 CSS 文档 中 , 都 会 使 用 “@charset” 声明 文档 所 使 用 的 字符 集 。 除 “@charset” 
声明 以 外 ， 其 他 的 声明 多 数 可 使 用 CSS 样式 来 蔡 代 。 


2. 内 部 CSS 




















内 部 CSS 与 内 联 CSS 类 似 ， 都 是 将 CSS 代码 放 在 文档 中 。 但 是 内 部 样式 并 不 是 放 
在 其 设置 的 标签 中 ， 而 是 放 在 统一 的 <style></style> 标 签 中 。 这 样 做 的 好 处 是 将 整个 页 面 
中 所 有 的 CSS 样式 集中 管理 ， 以 选择 器 为 接口 供 网 页 浏览 器 调用 。 

例如 ， 使 用 内 部 CSS 定义 网 页 的 宽度 以 及 超 链 接 的 下 画 线 等 ， 代 码 如 下 。 


<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 
<title> 测 试 网 页 文档 </title> 
<!-- 开 始 定义 CSS 文档 --> 
<style type="text/css"> 
= 

body { 

width:1003px; 

} 

a 1{ 
text-decoration:none; 


二 

</style> 

<!-- 内 部 CSS 完成 --> 
</head> 


提 

虽然 HTML 允许 用 户 将 <style> 标 签 放 在 网 页 的 任意 位 置 ， 但 在 浏览 器 打开 网 页 的 过 程 中 ， 通 常会 以 
从 上 到 下 的 顺序 解析 代码 。 因 此 ， 将 <style> 标 签 放置 在 网 页 的 头 部 ， 可 提前 下 载 和 和 解析 CSS 代码 ， 
提高 样式 显示 的 效率 。 








3. 内 联 CSS 


内 联 CSS 是 利用 标签 的 style 属性 设置 的 CSS 样式 ， 2 内 联 式 CSS 
与 HTML 中 的 标签 描述 一 样 ， 只 能 定义 某 一 个 网 页 元 素 的 样式 ， 是 一 种 过 渡 型 的 CSS 
使 用 方法 ,在 HIML 中 并 不 推荐 使 用 。 内 部 样式 不 需要 使 用 选择 器 ， 如 使 用 内 联 式 CSS 





























设置 一 个 表格 的 宽度 ， 代 码 如 下 。 





作为 一 种 网 页 的 标准 化 语言 ，CSS 有 着 严格 的 书写 规范 和 格式 。 
1. CSS 代码 规范 


用 户 在 书写 CSS 代码 时 ， 需 要 注意 以 下 几 点 。 

1) 单位 符号 

在 CSS 中 ,如 果 属 性 值 是 一 个 数字 ， 用户 必 须 为 这 个 数字 匹配 具体 的 单位 。 除 非 该 
数字 是 由 百分比 组 成 的 比例 或 者 数字 为 0。 

例如 ， 分 别 定义 两 个 层 ， 其 中 第 1 个 层 为 父 容器 ， 以 数字 属性 值 为 宽度 ， 而 第 2 个 
层 为 子 容 器 ， 以 百分比 为 宽度 ， 代 码 如 下 。 





2) 使 用 引号 

多 数 CSS 的 属性 值 都 是 数字 值 或 预先 定义 好 的 关键 字 。 然而， 有 一 些 属性 值 则 是 含 
有 特殊 意义 的 字符 串 。 这 时 ， 引 用 这 样 的 属性 值 就 需要 为 其 添加 引号 。 

典型 的 字符 串 属性 值 就 是 各 种 字体 的 名 称 。 





3) 多 重 属性 
如 果 在 这 条 CSS 代码 中 ， 有 多 个 属性 并 存 ， 则 每 个 属性 之 间 需 要 以 “分 号 ”(;) 
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4) 大 小 写 敏感 空格 

CSS 与 VBScript 不 同 ， 对 大 小 写 非常 敏感 。mainText 和 MainText 在 CSS 中 ， 是 两 
个 完全 不 同 的 选择 器 。 

除了 一 些 字符 串 式 的 属性 值 (如 英文 字体 "MS Serf" 等 ) 以 外 ，CSS 中 的 属性 和 属性 
值 必须 小 写 。 

为 了 便于 判读 和 纠 错 ， 在 编写 CSS 代码 时 ， 每 个 属性 值 之 间 添 加 一 个 空格 。 这 样 ， 
如 某 条 CSS 属性 有 多 个 属性 值 ， 则 阅读 代码 的 用 户 可 方便 地 将 其 分 开 。 


2. 添加 注释 


与 多 数 编程 语言 类 似 ， 用 户 也 可 以 将 CSS 代码 进行 注释 。 但 与 同样 用 于 网 页 的 
HTML 语言 注释 方式 有 所 区 别 。 

在 CSS 中 ,注释 以 “ 斜 杠 ”(/) 和 “ 星 号 ”(*) 开头 ， 以 “ 星 号 ”(*) 和 和 斜 杠 ”(/) 
结尾 。 

.text{ 

font-family: "微软 黑体 "; 

font-size:12px; 

/*COlor:#ffcc00;*/ 


} 
在 CSS 代码 中 ， 其 注释 不 仅 可 用 于 单行 ， 也 可 用 于 多 行 。 


7.2 使 用 【 CSS 设计 器 ] 面板 


Dreamweaver 中 的 CSS 样式 被 集成 在 一 个 独特 的 【CSS 设计 器 】 面 板 中 ， 包 括 源 、 
@ 媒 体 、 选 择 器 和 属性 4 个 窗 格 。【CSS 设计 器 】 面 板 类 似 于 【插入 】 面 板 ， 可 支持 用 户 
对 CSS 样式 进行 可 视 化 的 操作 。 





















































[ek 
在 【CSS 设计 器 】 面 板 的 最 上 部 分 为 【 源 】 窗 | [Sieycsxr 
和 css 源 
格 ,在 该 窗 格 中 主要 列 出 了 与 文档 相关 的 所 有 CSS ee 到 
样式 表 ， 以 协助 用 户 设置 网 页 所 使 用 的 CSS 样式 。 


1. 创建 新 的 CSS 文件 


创建 新 的 CSS 文件 是 在 网 页 中 创建 一 个 新 的 
CSS 文件 并 将 其 附加 到 文档 。 在 【CSS 设计 器 】 面 
板 中 的 【 源 】 窗 格 中 ， 单 击 右 上 角 的 【添加 CSS 在 了 图 7-2 。 创 建新 的 CSS 文件 
源 】 按 钮 ， 在 其 列表 中 选择 【创建 新 的 CSS 文件 】 
选项 ， 如 图 7-2 所 示 。 

然后 ， 在 弹出 的 【创建 新 的 CSS 文件】 对话 框 中 ， 单 击 【浏览 】 按 钮 ， 如 图 7-3 























所 示 。 
在 弹出 的 【将 样式 表 文 件 另 存 为 】 对 话 框 中 ， 设 置 保存 位 置 和 名 称 ， 单 击 【保存 】 
按钮 即 可 ， 如 图 7-4 所 示 。 








文 贱 5 自 同文 件 系统 和 和 
BE: espe 
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WL 
相对 于 - X 划 

在 让 点 定义 中 本 2 呈 这 的 圭 拉 相对 于 
无 法 生成 文件 相关 路 径 :没有 共同 根 目 录 。 


和 图 7-3_。【 创 建新 的 CSS 文件】 对 话 框 让 图 7-4_。【 将 样式 表 文 件 另存 为 】 对 话 框 


此 时 ， 系 统 会 自动 返回 到 【创建 新 的 CSS 文件 】 对 话 框 中 ， 选 中 【链接 】 选 项 ， 单 
击 【确定 】 按 钮 ， 即 可 创建 并 链接 外 部 CSS 样式 表 文 件 ， 如 图 7-5 所 示 。 

其 中 ， 在 【创建 新 的 CSS 文件 】 对 话 框 中 ， 主 要 包括 下 列 3 种 选项 ; 

口 链接 选中 该 选项 ， 可 以 将 CSS 文件 链接 到 文档 。 
口 导入 选中 该 选项 ， 可 以 将 CSS 文件 导入 到 文档 中 。 
口 有 条 件 使 用 (可 选 ) ”该 选项 用 于 指定 要 与 CSS 文件 关联 的 媒体 查询 。 


2. 附加 现 有 的 CSS 文件 


附加 现 有 的 CSS 文件 是 将 现 有 的 CSS 文件 附加 到 文档 中 。 在 【CSS 设计 器 】 面 板 
中 的 【 源 】 窗 格 中 ， 单 击 右上 角 的 【添加 CSS 源 】 按 钮 ， 在 其 列表 中 选择 【附加 现 有 的 
CSS 文件 】 选 项 。 在 弹出 的 【使 用 现 有 的 CSS 文件 】 对 话 框 中 ， 单 击 【 浏 览 】 按 钮 ， 如 
图 7-6 所 示 。 
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和 图 7-5_, 链 接 外 部 的 CSS 样式 和 图 7-6 _。【 使 用 现 有 的 CSS 文件】 对话 框 


在 弹出 的 【选择 样式 表 文 件 】 对 话 框 中 ， 选 择 所 需 使 用 的 CSS 样式 表 文 件 ， 并 单 击 
【确定 】 按 钮 ， 如 图 7-7 所 示 。 
此 时 ， 系 统 会 自动 返回 到 【创建 新 的 CSS 文件 】 对 话 框 中 ， 选 中 【链接 】 选 项 ， 单 
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击 【 确 定 】 按 钮 ， 即 可 将 所 选 CSS 样式 表 文 件 附加 到 现 有 文档 中 ， 如 图 7-8 所 示 。 



































和 图 7-7 选择 样式 表 文 件 和 图 7-8_。 附 加 现 有 文档 


3. 在 页 面 中 定义 


在 【CSS 设计 器 】 面 板 中 的 【 源 】 窗 格 中 ， 单 击 右上 角 的 【添加 CSS 源 】 按 钮 ， 在 
其 列表 中 选择 【在 页 面 中 定义 】 选 项 ， 系 统 即 可 创建 一 个 内 部 的 CSS 样式 ， 并 在 【 源 】 
窗 格 中 添加 一 个 <style> 标 签 ， 如 图 7-9 所 示 。 

在 网 页 中 ， 切 换 到 【代码 】 视 图 中 ， 用 户 会 发 现代 码 中 多 出 一 个 放置 内 部 CSS 样式 
的 <style> 标 签 ， 而 所 创建 的 内 部 CSS 样式 则 会 显示 在 <style> 与 </style> 标 签 之 间 ， 如 图 
7-10 所 示 。 


Ha 
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<!doctype html> 

<html> 

<head> 

<meta charset="utf-8"> 

<title> 无 标题 文档 </title> 
加 (<style type="text/css 

</style> 

</head> 


<body> | 显示 
ei | | 
</htmt> 








用 户 可 以 在 【@ 媒 体 】 窗 格 中 为 相应 的 媒体 类 型 设置 不 同 的 CSS 样式 。 要 设置 @ 媒 





体 ， 需 要 先 在 【 源 】 窗 格 中 选择 一 个 CSS 源 ， 然 后 单 击 【@ 媒 体 】 窗 格 右上 角 的 【添加 
媒体 查询 】 按 钮 ， 如 图 7-11 所 示 。 

然后 ， 在 弹出 的 【定义 媒体 查询 】 对 话 框 中 ， 单 击 【 媒 体 属 性 】 下 拉 按 钮 ， 选 择 一 
种 媒体 属性 ; 同时 ， 单 击 其 右 侧 的 【属性 值 】 下 拉 按 钮 ， 设 置 媒 体 属 性 值 。 除 此 之 外 ， 
用 户 还 可 以 通过 单 击 【添加 条 件 】 按 钮 ， 来 添加 多 个 媒体 属性 ， 或 者 通过 单 击 【删除 条 
件 】 按 钮 ， 来 删除 所 添加 的 媒体 属性 ， 如 图 7-12 所 示 。 


六 "让 亲 从 鞋 洲 。 











和 图 7-11 ,添加 媒体 查询 & 了 图 7-12_ 定义 媒体 查询 
设置 完 媒体 条 件 之 后 ， 单 击 【和 确定】 按钮 ， 即 可 创建 媒体 类 型 的 CSS 样式 。 


et nit | 


其 中 ，Dreamweaver 为 用 户 提供 了 23 种 媒体 属性 ， 其 具体 情况 如 下 所 述 : 

口 media 用 于 设置 提交 网 页 文档 的 媒体 类 型 ， 可 通过 属性 值 来 设置 属性 媒介 。 其 
中 ，screen 属性 值 表示 计算 机 显示 器 ，print 属性 值 表 示 打 印 机 ，handheld 属性 值 
表示 小 型 手持 设备 ，aural 属性 值 表示 语音 和 音频 合成 器 ,braille 属性 值 表示 盲文 
系统 ， 指 有 触觉 效果 的 印刷 品 ，projection 属性 值 表示 幻灯 片 式 的 方案 展示 ，tty 
属性 值 表示 固定 密度 字母 栅 格 的 设备 ，tv 属性 值 表示 电视 机 类 型 的 设备 。 

口 orientation 用 于 设置 目标 显示 器 或 纸张 方向 。 

口 min-width 用 于 设置 目标 显示 区 域 的 最 小 宽度 , 可 直接 在 文本 框 中 输入 宽度 值 ， 
并 在 其 后 的 下 拉 列 表 中 选择 宽度 单位 。 

口 max-width 用 于 设置 目标 显示 区 域 的 最 大 宽度 , 可 直接 在 文本 框 中 输入 宽度 值 ， 
并 在 其 后 的 下 拉 列 表 中 选择 宽度 单位 。 

口 width 用 于 设置 目标 显示 区 域 的 宽度 ， 可 直接 在 文本 框 中 输入 宽度 值 ， 并 在 其 
后 的 下 拉 列 表 中 选择 宽度 单位 。 

口 min-height 用 于 设置 目标 显示 区 域 的 最 小 高 度 ， 可 直接 在 文本 框 中 输入 高 度 
值 ， 并 在 其 后 的 下 拉 列 表 中 选择 高 度 单位 。 

口 max-height 用 于 设置 目标 显示 区 域 的 最 大 高 度 ， 可 直接 在 文本 框 中 输入 高 度 
值 ， 并 在 其 后 的 下 拉 列 表 中 选择 高 度 单位 。 

口 height 用 于 设置 目标 显示 区 域 的 高 度 ， 可 直接 在 文本 框 中 输入 高 度 值 ， 并 在 其 








后 的 下 拉 列 表 中 选择 高 度 单 位 。 
口 min-resolution 用 于 设置 媒体 的 最 小 像素 密度 ， 可 直接 在 文本 框 中 输入 像素 值 ， 
其 单位 包括 dpi、dpcm 和 dppx。 
max-resolution 用 于 设置 媒体 的 最 大 像素 密度 , 可 直接 在 文本 框 中 输入 像素 值 ， 
其 单位 包括 dpi、dpcm 和 dppx。 
resolution 用 于 设置 媒体 的 像素 密度 ， 可 直接 在 文本 框 中 输入 像素 值 ， 其 单位 
包括 dpi、dpcm 和 dppx。 
min-device-aspect-ratio 用 于 设置 媒体 device-width/ device-height 的 最 小 比率 。 
max-device-aspect-ratio 用 于 设置 媒体 device-width/ device-height 的 最 大 比率 。 
device-aspect-ratio 用 于 设置 媒体 device-width/ device-height 的 比率 。 
min-aspect-ratio 用 于 设置 目标 显示 区 域 的 最 小 宽度 和 高 度 比 。 
max-aspect-ratio 用 于 设置 目标 显示 区 域 的 最 大 宽度 和 高 度 比 。 
aspect-ratio 用 于 设置 目标 显示 区 域 的 宽度 和 高 度 比 。 
min-device-width 用 于 设置 媒体 的 最 小 宽度 。 
max-device-width 用 于 设置 媒体 的 最 大 宽度 。 
device-width 用 于 设置 媒体 的 宽度 。 
min-device-height 用 于 设置 媒体 的 最 小 高 度 。 
max-device-height 用 于 设置 媒体 的 最 大 高 度 。 
device-height 用 于 设置 媒体 的 高 度 。 
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在 【CSS 设计 器 】 面 板 中 的 【选择 器 】 窗 格 中 ， 单 击 右上 角 的 【添加 选择 器 】 按 钮 ， 
系统 会 自动 在 窗 格 中 显示 一 个 文本 框 ， 输 入 选择 器 名 称 即 可 ， 如 图 7-13 所 示 。 

另外 ， 在 文本 框 中 输入 第 1 个 字母 后 ， 系 统 会 自动 列 出 有 关 第 1 个 字母 的 所 有 选择 
器 名 称 ， 以 供用 户 进行 选择 ， 如 图 7-14 所 示 。 
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和 |_ 图 7-13_, 添 加 选择 器 和 图 7-14 ,选择 选择 器 





除 此 之 外 ， 用 户 在 列表 框 中 选择 选择 器 名 称 ， 单 击 右上 角 的 【删除 选择 器 】 按 钮 ， 
即 可 删除 所 选 选择 器 。 而 对 于 列表 框 中 存在 大 量 选择 器 的 现象 , 则 可 以 通过 在 【筛选 CSS 
规则 】 文 本 框 中 输入 选择 器 名 称 的 方法 ， 来 搜索 选择 器 。 






在 【CSS 设计 器 】 面 板 中 的 【属性 】 窗 格 中 ， 可 以 为 

指定 的 CSS 样式 设置 其 属性 ， 如 图 7-15 所 示 。 

在 【属性 】 窗 格 中 ， 主 要 包括 下 列 5 种 类 型 的 属性 : 

口 布局 激活 该 选项 卡 ， 可 以 设置 CSS 样式 的 布局 
样式 ， 包 括 宽度 、 高 度 、 最 小 宽度 等 属性 。 

口 文本 ”激活 该 选项 卡 ， 可 以 设置 CSS 样式 的 文本 
格式 , 包括 字体 大 小 、 字 体 颜 色 、 字体 变形 等 属性 。 

口 边框 ”激活 该 选项 卡 ， 可 以 设置 CSS 样式 的 边框 
格式 ， 包 括 所 有 边 、 顶 部 、 右 侧 等 属性 。 

口 背景 激活 该 选项 卡 ， 可 以 设置 CSS 样式 的 背景 [所 入 式 :3 
格式 , 包括 背景 位 置 、 背景 大 小 、 背 景 颜 色 等 属性 。 

D 自 定义 “激活 该 选项 卡 ， 可 以 自 定 义 除 内 置 的 布 人 图 7-15 设置 属性 
局 、 文 本 、 边 框 和 背景 属性 之 外 的 CSS 样式 属性 。 








7.3 CSS 选择 般 和 方法 





虽然 用 户 已 通过 CSS 样式 概述 和 【CSS 设计 器 】 面 板 等 基础 知识 对 CSS 样式 有 了 
进一步 的 了 解 ， 但 为 了 可 以 更 好 地 使 用 CSS 样式 表 ， 还 需要 继续 了 解 一 下 CSS 选择 器 
和 CSS 选择 方法 等 基础 知识 。 
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在 网 页 制作 中 ， 用 户 可 以 通过 CSS 选择 器 ， 来 实现 CSS 对 HTML 页 面 中 的 元 素 实 
现 一 对 一 、 一 对 多 或 者 多 对 一 的 控制 。 

CSS 选择 器 的 名 称 只 允许 包含 字母 、 数 字 以 及 下 夯 线 ， 系 统 不 允许 将 数字 放 在 选择 
器 名 称 的 第 1 位 ， 也 不 允许 选择 器 使 用 与 HTML 标签 重复 的 名 称 ， 以 免 出 现 混 乱 。 

在 CSS 语法 规则 中 ， 主 要 包括 标签 选择 器 、 类 选择 器 、ID 选择 器 、 伪 类 选择 器 和 
伪 对 象 选 择 器 5 种 选择 器 。 


1. 标签 选择 器 
CSS 提供 了 标签 选择 器 ， 并 允许 用 户 直 接 定 义 多 数 XHMTIL 标签 样式 。 
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例如 ， 定 义 网 页 中 所 有 无 序列 表 的 符号 为 空 ， 可 直接 使 用 项 目 列表 的 标签 选择 器 。 


当 用 户 使 用 标签 选择 器 定义 某 个 标签 样式 后 ， 其 整个 网 页 中 的 所 有 该 标签 都 会 自动 
应 用 这 一 样式 。CSS 在 原则 上 不 允许 对 同一 标签 的 同一 个 属性 进行 重复 定义 ， 但 在 实际 
操作 中 将 会 以 最 后 一 次 定义 的 属性 值 为 准 。 


2. 类 选择 器 


CSS 样式 中 的 类 选择 器 可 以 把 不 同类 型 的 网 页 标签 归 为 一 类 ， 并 为 其 定义 相同 的 样 
式 ， 以 简化 CSS 代码 。 

在 使 用 类 选择 器 时 ， 需 要 在 类 选择 器 名 称 的 前 面 添加 类 符号 “ 圆 点 ”(.)。 

而 在 调用 类 的 样式 时 ， 则 需要 为 HTML 标签 添加 class 属性 ， 并 将 类 选择 器 的 名 称 
作为 class 属性 的 值 。 


例如 ， 网 页 文档 中 有 3 个 不 同 的 标签 ， 一 个 是 层 (div)， 一 个 是 段落 (p)， 一 个 是 
无 序列 表 〈ul)。 如 果 使 用 标签 选择 器 为 这 3 个 标签 定义 样式 ， 使 其 中 的 文本 变 为 红色 ， 
则 需要 编写 3 条 CSS 代码 。 
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但 是 ， 使 用 类 选择 器 ， 则 可 以 将 上 述 3 条 CSS 代码 合并 为 1 条 。 


然后 ， 即 可 为 <div>、<p> 和 <ul> 等 标签 添加 class 属性 ， 应 用 类 选择 器 的 样式 。 








一 个 类 选择 器 可 以 对 应 于 文档 中 的 多 种 标签 或 多 个 标签 , 充分 体现 了 CSS 代码 的 可 
重复 性 。 

类 选择 器 与 标签 选择 器 都 具有 各 自 的 用 途 ， 但 相对 于 标签 选择 嚣 来 讲 ， 类 选择 器 可 
以 指定 某 一 个 范围 内 的 应 用 样式 ， 具 有 更 大 的 灵活 性 。 除 此 之 外 ， 对 于 类 选择 器 来 讲 ， 
其 标签 选择 则 具有 操作 简单 和 定义 方便 的 优点 ， 使 用 标签 选择 器 可 以 在 不 需要 为 标签 添 
加 任何 属性 的 前 提 下 即 可 应 用 样式 。 


3. ID 选择 器 


ID 选择 器 是 一 种 只 针对 某 一 个 标签 的 、 唯 一 性 的 选择 器 , 它 不 像 标签 和 类 选择 器 那 
样 可 以 设 定 多 个 标签 的 CSS 样式 。 

在 HIML 文档 中 ， 用 户 可 以 为 任意 一 个 标签 设 定 ID 属性 ， 并 通过 该 ID 定义 CSS 
样式 。 但 是 ，HTML 文档 并 不 允许 两 个 标签 使 用 同一 个 ID。 

在 创建 ID 选择 器 时 ， 需 要 在 选择 器 名 称 前 面 添加 “ 井 号 ”(#)。 但 是 ， 在 为 HIML 
标签 调用 ID 选择 器 时 ， 则 需要 使 用 其 id 属性 。 

例如 ， 通 过 ID 选择 器 ， 分 别 定义 某 个 无 序列 表 中 3 个 列表 项 的 样式 。 





然后 ， 便 可 使 用 标签 的 id 属性 ， 应 用 3 个 列表 项 的 样式 。 





4. 伪 类 选择 器 


伪 选 择 器 与 普通 的 选择 器 不 同 ， 它 通常 不 能 应 用 于 某 个 可 见 的 标签 ， 只 能 应 用 于 一 
些 特殊 标签 的 状态 。 其 中 ， 最 常见 的 伪 选 择 器 就 是 伪 类 选择 器 。 
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在 定义 伪 类 选择 器 之 前 ， 必 须 首 先 声明 定义 的 是 哪 一 类 网 页 元 素 ， 并 将 这 类 网 页 元 
素 的 选择 器 写 在 伪 类 选择 器 之 前 ， 中 间 使 用 “冒号 ”(: ) 隔 开 。 





selector:pseudo-class{property:value} 


/* 选 择 器 : 伪 类 {属性 : 属性 值 : }*/ 
在 CSS 标准 中 ， 共 包含 了 表 7-2 中 的 7 种 伪 类 选择 器 。 


3 表 7-2 。 伪 类 选择 器 及 作用 
伪 类 选择 器 












未 被 访问 过 的 超 链接 
鼠标 滑 过 超 链接 
被 激活 的 超 链接 
被 访问 过 的 超 链接 
输入 焦点 时 的 对 象 样式 
第 1 个子 对 象 的 样式 
第 1 页 使 用 的 样式 

例如 ， 当 需要 去 除 网 页 中 所 有 超 链 接 在 默认 状态 下 的 下 画 线 时 ， 就 需要 使 用 伪 类 选 
择 器 。 

a:link{ 

/* 定 义 超 链 接 文 本 的 样式 */ 

text-decoration:none; 

/* 去 除 文本 下 画 线 */ 

1 


5. 伪 对 象 选择 器 


伪 对 象 选择 器 也 是 一 种 伪 选 择 器 ， 其 主要 作用 是 为 某 些 特定 的 选择 器 添加 效果 。 
在 CSS 标准 中 ， 共 包含 表 7-3 中 的 4 种 伪 对 象 选 择 器 。 














3 区 表 7-3 。 伪 对 象 选 择 器 及 作用 
伪 对 象 选 择 器 
:first-letter 定义 选择 器 所 控制 的 文本 第 一 个 字 或 字母 
定义 选择 器 所 控制 的 文本 第 一 行 


定义 某 一 对 象 之 后 的 内 容 
定义 某 一 对 象 之 前 的 内 容 
伪 对 象 选择 器 的 使 用 方法 与 伪 类 选择 器 类 似 ， 都 需要 先 声 明定 义 的 是 哪 一 类 网 页 元 
素 ， 并 将 这 类 网 页 元 素 的 选择 器 写 在 伪 对 象 选择 器 之 前 ， 并 使 用 “冒号 ”(: ) 隔 开 。 
例如 ， 定 义 某 一 个 段落 文本 中 第 1 个 字 为 2em， 即 可 使 用 伪 对 象 选择 器 。 


Pi 
font-size:12px; 
p:first-lettert{ 











font-size:2em; 


通过 CSS 选择 方法 ， 可 以 对 各 种 网 页 标签 进行 复杂 的 选择 操作 ， 以 提高 CSS 代码 
的 效率 。 

在 CSS 语法 中 ， 存 在 多 种 选择 方法 ， 其 最 常用 的 选择 方法 为 包含 选择 、 分 组 选择 和 
通用 选择 。 

1. 包含 选择 


包含 选择 通常 应 用 于 定义 各 种 多 层 嵌 套 网 页 元 素 标签 的 样式 ， 可 根据 网 页 元 素 标签 
的 撕 套 关系 ， 来 帮助 浏览 器 精确 地 查找 该 元 素 的 位 置 。 

在 使 用 包含 选择 方法 时 ， 需 要 将 具有 包含 选择 关系 的 各 种 标签 按照 指定 的 顺序 写 在 
选择 器 中 ， 并 以 空格 来 分 开 这 些 选 择 器 。 例 如 ， 在 网 页 中 ， 有 3 个 标签 的 嵌 套 关系 如 下 
所 示 。 

<tagNamel> 

<tagName2> 

<tagName3>innerText .</tagName3> 

</tagName2> 

</tagNamel> 

<tagName3>outerText</tagName3> 
如 上 述 代码 中 , tagNamel、tagName2 和 tagName3 分 别 代表 3 个 不 同 的 标签 。 其中， 
tagName3 标签 在 网 页 中 出 现 3 次 。 如 果 直 接 通过 tagName3 的 标签 选择 器 定义 outerText 
文本 的 样式 ， 则 势必 会 影响 外 部 outerText 文本 的 样式 。 
因此 , 用 户 如 果 需 要 定义 innerText 文本 的 样式 且 不 影响 tagName3 以 外 的 文本 样式 ， 
则 可 以 通过 包含 选择 方法 进行 定义 ， 其 代码 如 下 所 述 。 

tagNamel tagName2 tagName3{property:value;} 

在 上 面 的 代码 中 ， 以 包含 选择 的 方式 定义 了 包含 tagNamel 和 tagName2 标签 中 的 
tagName3 标签 的 CSS 样式 。 同 时 ， 该 CSS 样式 不 会 影响 tagNamel 标签 外 的 tagName3 
标签 的 样式 。 

包含 选择 的 方法 不 仅 可 以 将 多 个 标签 选择 器 组 合 起 来 使 用 ， 而 且 还 适用 于 ID 选择 
器 、 类 选择 器 等 多 种 选择 器 。 


2. 分 组 选择 


分 组 选择 是 一 种 用 于 同时 定义 多 个 相同 CSS 样式 的 标签 时 所 使 用 的 选择 方法 , 其 定 
义 时 需要 将 选择 器 以 “逗号 ”(,) 分 开 。 
selectorl, selector2{property:value;} 


在 上 面 的 代码 中 ，selectorl 和 selector2 分 别 表 示 应 用 于 相同 样式 的 两 个 选择 器 ， 而 
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property 则 表示 CSS 样式 属性 ，value 表示 CSS 样式 属性 值 。 
例如 ， 在 定义 网 页 中 的 <body> 标 签 ， 以 及 所 有 的 段落 、 列 表 的 行 高 均 为 18px 时 ， 
其 代码 如 下 所 述 。 


body,p,ul,1i,ol{ 
line-height:18px; 


在 编写 网 页 的 CSS 样式 时 ， 使 用 分 组 选择 方法 可 以 定义 多 个 HTML 元 素 标签 的 相 
同样 式 ， 提 高 代码 的 重用 性 。 


3. 通用 选择 

通用 选择 方法 的 作用 是 通过 通配符 “*”， 对 网 页 标签 进行 选择 操作 。 

使 用 通用 选择 方法 ， 可 以 方便 地 定义 网 页 中 所 有 元 素 的 样式 ， 其 代码 如 下 所 述 。 
*{property:value;} 


在 上 面 的 代码 中 ， 通 配 符 “*” 可 以 替换 网 页 中 所 有 的 元 素 标签 。 例 如 ， 定 义 网 页 
中 所 有 标签 的 文本 大 小 为 12px， 其 代码 如 下 所 述 。 


*{font-size:12px;} 


同 理 ， 使 用 通用 选择 也 可 以 定义 某 一 个 网 页 标签 中 嵌 套 的 所 有 标签 样式 。 例 如 ， 定 
义 记 为 testDiv 的 层 中 所 有 文本 的 行 高 为 30px， 其 代码 如 下 所 述 。 


#testDiv*{line-height:30px;} 





在 Dreamweaver 中 ,通过 CSS 样式 可 以 定义 页 面 元 素 的 文本 、 背 景 、 边 框 、 背 景 等 
外 观 效果 。 用 户 可 通过 【CSS 设计 器 】 面 板 ， 对 CSS 样式 属性 进行 可 视 化 操作 。 
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布局 样式 主要 用 来 设置 网 页 元 素 的 位 置 属性 ,包括 大 小 、 填 充 、 边 距 等 。 在 【属性 】 
窗 格 中 ， 激 活 【 布 局 】 选 项 卡 ， 设 置 新 选择 器 样式 的 各 属性 ， 如 图 7-16 所 示 。 
其 中 ， 在 【布局 】 选 项 卡 中 ， 主 要 包括 下 列 一 些 属性 : 
口 width 用 于 设置 元 素 的 宽度 ， 默 认为 auto， 单 击 该 选项 ， 可 在 列表 中 选择 其 他 
选项 ， 并 根据 选项 类 型 输入 宽度 值 。 


口 height 用 于 设置 元 素 的 高 度 ， 默 认为 auto， 单 击 该 选项 ， 可 在 列表 中 选择 其 他 
选项 ， 并 根据 选项 类 型 输入 高 度 值 。 

口 min-width 用 于 设置 元 素 的 最 小 宽度 。 

口 min-height 用 于 设置 元 素 的 最 小 高 度 。 

口 max-width 用 于 设置 元 素 的 最 大 宽 
度 ， 默 认为 none， 单 击 该 选项 ， 可 在 
列表 中 选择 其 他 选项 ， 并 根据 选项 类 
型 输入 宽度 值 。 

口 max-height 用 于 设置 元 素 的 最 大 高 
度 ， 默 认为 none， 单 击 该 选项 ， 可 在 
列表 中 选择 其 他 选项 ， 并 根据 选项 类 
型 输入 高 度 值 。 可 

口 display 用 于 设置 元 素 的 显示 方式 ， 
默认 为 inline， 可 单 击 该 选项 ， 在 其 列表 中 选择 相应 的 显示 方式 。 

口 box-sizing 用 于 以 特定 的 方式 定义 匹配 指定 区 域 的 特定 元 素 。 

口 margin 用 于 设置 元 素 的 边界 ， 当 为 元 素 设 置 边框 时 , 则 该 选项 表示 边框 外 侧 的 

空白 区 域 。 用 户 可 通过 设置 上 下 左右 值 来 调整 元 素 的 边界 ， 或 者 直接 在 【设置 速 

记 】 文 本 框 中 输入 设置 边 距 的 速记 值 。 

口 padding 用 于 设置 元 素 的 填充 ， 当 为 元 素 设置 边框 时 ， 则 该 选项 表示 边框 和 内 

容 之 间 的 空白 区 域 . 用户 可 通过 设置 上 下 左右 值 来 调整 元 素 的 填充 , 或 者 直接 在 

【设置 速记 】 文 本 框 中 输入 设置 填充 的 速记 值 。 

口 position 用 于 设置 元 素 的 定位 方式 ， 其 中 ，static (静态 ) 选项 为 默认 选项 ， 表 
示 无 特殊 定位 ; absolute ( 绝对 ) 选项 表示 绝对 定位 ， 其 左上 角 的 顶点 为 元 素 的 
定位 原点 ， 可 通过 设置 top、right、bottom 和 left 选项 控制 元 素 相 对 于 原点 的 位 
置 ; fixed (固定 ) 选项 表示 固定 位 置 ， 其 位 置 将 保持 不 变 ; relative ( 相对 ) 选项 
表示 相对 定位 ， 可 通过 设置 top、right、bottom 和 left 选项 控制 元 素 相对 于 网 页 
中 的 位 置 。 

口 float 用 于 设置 元 素 的 浮动 定位 ， 也 就 是 对 象 的 环绕 效果 。 其 中 ，lef 回 选项 表示 
对 象 居 左 ， 其 文字 等 内 容 从 另 一 侧 进行 环绕 ; righ 儒 选项 表示 对 象 居 右 ， 其 文字 
等 内 容 从 另 一 侧 进行 环绕 ; 而 none 国 选项 表示 取消 环绕 效果 。 

口 clear 用 于 清除 元 素 的 浮动 效果 。 其 中 ，left 回 表示 清除 元 素 左 侧 的 浮动 效果 ， 
Tight 国 选项 表示 清除 元 素 右 侧 的 浮动 效果 ，both 国 选项 表示 清除 元 素 左 侧 和 右 侧 
的 浮动 效果 ，none 国 选项 表示 不 清除 浮动 效果 。 

口 overflow-x/y 用 于 设置 元 素 水 平 溢出 和 垂直 溢出 的 行为 方式 。 

口 visibility 用 于 设置 元 素 的 可 见 性 。 其 中 ，inherit 选项 用 于 设置 谋 套 元 素 ， 其 主 

元 素 会 继承 父 元 素 的 可 见 性 ; visible 选项 表示 元 素 始终 处 于 可 见 状 态 ; hidden 选 

项 表示 元 素 始终 处 于 隐藏 状态 。 

口 z-index 用 于 设置 元 素 的 堆积 顺序 。 

口 opacity 用 于 设置 元 素 的 不 透明 度 。 
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文本 是 网 页 中 最 基础 的 元 素 之 一 , 通过 【CSS 设计 
器 】 面 板 中 的 【属性 】 窗 格 ， 不仅 可 以 设置 文本 的 字体 上 
样式 ， 而 且 还 可 以 设置 文本 的 阴影 效果 。 国立 二 














color : 园 wverned 
1. 设置 字体 样式 fontfamiy : default font 


font-style 


字体 样式 主要 用 于 设置 字体 的 外 观 样 式 , 包括 文本 | fontvarat 
颜色 、 字 体系 列 、 字 体 样式 等 一 系列 的 属性 选项 ， 如 图 | me* 

7-17 所 示 。 line-height 

其 中 ， 各 种 属性 选项 的 具体 合 义 ， 如 下 所 述 : ee 

口 color 用 于 设置 字体 颜色 ， 单 击 【 设 置 颜色 〗 | wwnsex ， 
按钮 [本 ， 可 在 展开 的 颜色 选择 窗口 中 设置 字体 
闫 色 ; 也 可 以 在 文本 框 中 直接 输入 颜色 值 。 和 图 7-17 。 设 置 字体 样式 

口 font-family 用 于 设置 字体 系列 ， 单 击 属性 值 ， 

可 在 其 列表 中 选择 一 种 字体 组 合 系列 。 另 外 ， 还 可 通过 选择 【管理 字体 】〗】 选 项 ， 

来 管理 本 地 字体 系列 。 

font-style 用 于 设置 字体 样式 ， 其 中 ，normal 选项 表示 标准 的 字体 样式 ，italic 

选项 表示 带 有 斜体 变量 的 字体 所 使 用 的 斜体 ，oblique 选项 表示 无 斜体 变量 的 字 

体 所 使 用 的 倾 针 。 

口 font-variant 用 于 设置 字体 变形 效果 ， 其 中 ，normal 选项 表示 标准 的 字体 样式 ， 
small-caps 选项 表示 小 型 大 写字 母 的 字体 样式 。 

口 font-weight 用 于 设置 字体 的 粗细 程度 。 

口 font-size 用 于 设置 字体 的 大 小 ， 可 通过 单 击 属性 值 来 设置 字体 大 小 的 单位 ， 并 
输入 相应 的 大 小 值 。 

口 line-height 用 于 设置 文本 的 行 高 ， 可 通过 单 击 属性 值 来 设置 文本 行 高 的 单位 ， 
并 输入 相应 的 行 高 值 。 

口 text-align 用 于 设置 文本 的 对 齐 方式 , 其 中 , lef 国 选项 表示 文本 左 对 齐 , cente! 峡 
选项 表示 文本 居中 对 齐 ，righ 侍 选项 表示 文本 右 对 齐 ，justify 国 选项 表示 文本 两 端 
对 齐 。 

口 text-decoration 用 于 设置 文本 的 修饰 效果 ， 其 中 ，none 国 选项 表示 不 对 文本 进 
行 任何 修饰 ，underline 国 选项 表示 对 文本 添加 下 画 线 ，overline 国 选项 表示 对 文本 
添加 上 画 线 ，line-through 国 选项 表示 对 文本 添加 删除 线 。 

口 text-indent 用 于 设置 文本 的 首 行 缩 进 ， 可 以 直接 输入 缩 进 值 。 


2. 设置 字体 阴影 


字体 阴影 效果 为 CSS 3.0 中 新 增 的 属性 ， 主 要 用 于 设置 文本 的 水 平 阴影 、 垂 直 阴 影 
和 阴影 颜色 等 阴影 效果 ， 如 图 7-18 所 示 。 
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其 中 ， 有 关 字体 阴影 属性 的 各 选项 的 具体 含义 ， 如 下 所 述 : 


口 h-shadow 用 于 设置 文本 的 水 平 阴影 ， 其 属性 
值 允 许 负 值 的 存在 。 

口 v-shadow 用 于 设置 文本 的 垂直 阴影 ， 
值 允 许 负 值 的 存在 。 

口 blur 用 于 设置 文本 阴影 的 模糊 半径 。 


口 color 用 于 设置 文本 的 阴影 颜色 。 
3. 设置 其 他 字体 样式 
在 【属性 】 窗 格 中 ， 除 了 普通 的 字体 样式 和 阴影 
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: | undefined 














和 图 7-18 ,设置 字体 阴影 


样式 之 外 ， 还 包括 一 些 其 他 的 字体 样式 。 例 如 ， 设 置 列表 项 目标 记 类 型 、 设 置 垂直 对 齐 


方式 等 字体 样式 ， 如 图 7-19 所 示 。 


其 中 ， 有 关 其 他 字体 样式 属性 的 各 选项 的 具体 es 


含义 ， 如 下 所 述 : 

口 text-lransfom 用 于 设置 英文 字体 的 大 小 写 
格式 ， 其 中 ，none 回 选项 表示 标准 样式 ， 
capitalize 回 选项 表示 每 个 单词 以 大 写字 母 开 
头 ，uppercase 回 选项 表示 每 个 单词 都 以 大 写 
字母 进行 显示 ，lowercase 国 选项 表示 每 个 单 
词 都 以 小 写字 母 进 行 显示 。 

口 letter-spacing 用 于 设置 文本 中 字符 之 间 的 
空格 。 
口 word-spacing 用 于 设置 单词 之 间 的 距离 。 





四 而 口 硬 回 
: AbABab 


: normal 


text-transform 
letter-spadng 
word-spadng 
white-space 
vertical-align 


list-stye- 
posiion 
list-styleimage 


list-styletype 





: normal 
: normal 


: baseline 口 


: none 


: undefined 








和 图 7-19 ,设置 其 他 字体 样式 


口 white-space 用 于 设置 源 代码 中 空格 的 显示 状态 , 其 中 , normal 选项 表示 忽略 所 


有 空格 ，nowrap 选项 表示 不 自动 换行 ，pre 选项 表示 保留 源 代码 中 的 所 有 空格 ， 
pre-line 选项 表示 忽略 空格 并 保留 源 代码 中 的 换行 ，pre-wrap 选项 表示 保留 源 代 


码 中 的 空格 并 正常 换行 。 
口 vertical-align 用 于 设置 秋 直 对 齐 方式 。 
口 list-style-position 用 于 设置 列表 对 象 位 置 。 
D list-style-image 用 于 设置 列表 样式 图 像 。 





eam 


口 list-style-type 用 于 设置 列表 项 目的 标记 类 型 。 


边框 样式 主要 用 于 设置 边框 的 高 度 、 颜 色 和 圆 角 边框 效果 等 边框 属性 ， 相 对 于 旧版 
本 的 边框 样式 ， 新 版 本 的 更 加 简单 直观 ， 如 图 7-20 所 示 。 

在 【边框 】 选 项 卡 中 ， 系 统 为 用 户 划分 为 所 有 边 、 顶 部 、 右 侧 、 底 部 和 左 侧 5 种 不 
同 的 边框 样式 ， 用 户 可 根据 设计 需求 来 设置 不 同 的 边框 样式 。 除 此 之 外 ， 用 户 还 可 以 通 
过 border 选项 ， 来 快速 设置 边框 的 速记 值 ， 使 其 应 用 到 所 有 边框 选项 中 。 
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Dreamweaver 中 的 5 种 边框 样式 具有 相同 的 属性 选 

， 下 面 根据 “所 有 边 ” 边 框 样式 来 详细 介绍 边框 属性 选 

的 具体 含义 。 

口 width 用 于 设置 边框 的 宽度 。 

口 style 用 于 设置 边框 的 样式 ,包括 none( 无 ) .dotted 

(点 画 线 )、dashed (虚线 )、solid ( 实 线 )、double 
( 双 线 )、groove (楼 状 线 )、ridge ( 瑚 状 线 )、inset 
( 凹 进 )、outset ( 凸 出 ) 和 hidden (隐藏 )。 

口 color 用 于 设置 边框 线 的 颜色 。 

口 border-radius 用 于 设置 圆 角 边框 效果 , 除了 可 以 
通过 设置 边框 半径 的 速记 值 来 快速 设置 圆 角 效果 
之 外 ; 还 可 以 通过 分 别 设置 上 边框 和 下 边框 的 左右 
半径 值 ， 来 设置 圆 角 效果 。 

口 border-collapse 用 于 设置 边框 的 合成 效果 ， 其 了 图 7-20 ,设置 边框 样式 
中 ，collapse 国 选项 表示 合并 单一 的 边框 ,separate 国 
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选项 表示 分 开 边 框 。 
口 border-spacing 用 于 设置 相 邻 边框 之 间 的 距离 , 其 第 1 个 属性 值 表示 垂直 距离 ， 
第 2 个 属性 值 表示 水 平 距离 。 
全 @--7.4.4 设置 背景 样式 -， 


有 人 二 喇 攻 贡品 疝 车 训 二 村 吉安 局 后 二 喇 志 后 如 





backgroundeolor  : 了 
通过 CSS 样式 中 的 背景 属性 ， 可 以 协助 用 户 制作 | sockgrowna mooe 
出 漂亮 的 网 页 背景 。 例 如 ， 设 置 青 景 颜色 、 渐 变 颜 | “久生 
色 、 背 景 大 小 、 背 景 剪辑 、 背 景深 动 模式 等 , 如 图 7-21 

所 示 。 
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其 中 ,【 背 景 】 选 项 卡 中 各 属性 选项 的 具体 含义 ， | bactgroudrpe ， ss 
如 下 所 述 : backgroundorgn : 


口 background-color 用 于 设置 背景 颜色 。 

口 background-image 用 于 设置 背景 图 像样 式 ， 
用 户 可 以 在 url 文本 框 中 输入 图 像 的 文件 地 
址 ， 或 者 文本 框 右 侧 的 【浏览 〗 按 钮 来 选择 图 
像 路 径 。 另 外 ， 可 通过 gradient 属性 ， 来 设置 


























图 像 的 渐变 颜色 。 了 图 7-21 ,设置 背景 样式 
口 background-position 用 于 设置 背景 图 像 的 
水 平和 垂直 位 置 。 


口 background-size 用 于 设置 背景 图 像 的 大 小 。 
口 background-clip 用 于 设置 背景 裁剪 区 域 ,其 中 ,padding-box 选 项 表示 从 padding 








区 域 向 外 裁剪 区 域 ,border-box 选项 表示 从 border 区 域 向 外 裁剪 区 域 , content-box 
表示 从 content 区 域 向 外 裁剪 区 域 。 

口 background-repeat 用 于 设置 背景 的 平 铺 方式 ， 其 中 ，repea 国 选项 表示 可 以 在 
水 平和 垂直 方向 的 平 铺 ,repeat-x 辆 选项 表示 只 能 在 水 平方 向 上 平 铺 , repeat-y 国 选 
项 表示 只 能 在 垂直 方向 上 平 铺 ，no-repeat 贺 选项 表示 不 对 背景 进行 平 铺 。 

口 background-origin 用 于 设置 背景 的 绘制 区 域 。 

口 background-attachment 用 于 设置 背景 的 滚动 模式 。 

口 box-shadow 用 于 设置 背景 的 阴影 效果 ， 其 中 ，h-shadow 选项 用 于 设置 水 平 阴 
影 ，V-shadow 选项 用 于 设置 垂直 阴影 ，blur 选项 用 于 设置 框 阴 影 的 模糊 半径 ， 
spread 选项 用 于 设置 框 阴影 的 扩散 半径 ，color 选项 用 于 设置 阴影 颜色 ，inset 选 
项 用 于 转换 外 部 和 内 部 投影 。 





7.5 使 用 CSS 过 渡 效 果 





在 Dreamweaver 中 ,除了 可 以 视觉 性 地 创建 CSS 样式 表 之 外 , 还 可 以 通过 创建 CSS 
过 渡 效 果 ， 来 突出 网 页 元 素 的 动态 效果 。 


兰 盯 SS 册 ~ 潞 


首先 ， 执 行 【 窗 口 】|【CSSs 过 渡 效果 】 
命令 , 打开 【CSS 过 渡 效果 】 面 板 ， 单 击 【新 
建 过 渡 效 果 】 按 钮 ， 如 图 7-22 所 示 。 

然后 ， 在 弹出 的 【新 建 过 渡 效 果 】 对 话 ” 生 图 7-22 ,新 建 过 渡 效 果 
框 中 ,设置 【目标 规则 】、【 过 渡 效 果 开 启 】 
等 选项 ， 并 单 击 【 创 建 过 渡 效 果 】 按 钮 ， 如 图 7-23 所 示 。 

在 该 对 话 框 中 ， 主 要 包括 下 列 10 
种 选项 : 







































































目标 规则 (ER): | ~ 
口 目标 规则 用 于 设置 选择 器 的 RB) [lv 
名 称 ,其 选择 器 可 以 为 任意 类 型 ”| [EN 村 
的 CSS 选择 器 。 的 时 间 (D) 区 本 
口 过 渡 效 果 开 启 ”用 于 设置 应 用 es 
过 渡 效 果 的 状态 ， 其 中 ，active | | go 
选项 表示 单 击 或 激活 ，checked IE 
选项 表示 选中 状态 ，disabled 选 | 
项 表示 禁用 状态 ，enabled 选项 i 和 
表示 启用 状态 ，focus 选项 表示 ee 

















获得 焦点 状态 ，hover 选项 表示 
筷 标 经 过 或 悬 停 状 态 ， 芋 y 图 7-23 【新 建 过 渡 效 果 】 对 话 杠 
indeterminate 选项 表示 不 确定 状 
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态 ，target 选项 表示 打开 超 链 接 状 态 。 
口 对 所 有 属性 使 用 相同 的 过 渡 效果 ”选择 该 选项 ， 可 以 为 需要 过 渡 的 所 有 CSS 属 
性 指定 相同 的 【持续 时 间 有 【延迟 〗 和 【计时 功能 】〗 选 项 。 
口 对 每 个 层 使 用 不 同 的 过 渡 效 果 ”选择 该 选项 ， 可 以 为 所 需要 过 渡 的 每 个 CSS 属 
性 指定 不 同 的 【持续 时 间 有 【延迟 〗 和 【计时 功能 】〗 选 项 。 
口 持续 时 间 “用 于 设置 过 渡 效 果 的 持续 时 间 ， 其 单位 可 以 为 秒 (s) 或 毫秒 (ms )。 
口 延迟 用 于 设置 过 渡 效 果 开始 之 前 的 间隔 时 间 , 其 单位 可 以 为 秒 (s ) 或 毫秒 (ms )。 
口 计时 功能 ”用 于 设置 过 渡 效 果 的 样式 。 
口 属性 用 于 显示 CSS 属性 ， 可 通过 单 击 加 号 按钮 四 来 添加 CSS 属性 ， 通 过 单 击 
减 号 按钮 三 喘 除 CSS 属性 。 
口 结束 值 ” 用 于 设置 过 渡 效 果 的 结束 值 。 
口 选择 过 渡 的 创建 位 置 ” 用 于 设置 过 渡 效 果 的 嵌入 位 置 。 





创建 CSS 过 渡 效 果 之 后 ， 用 户 可 以 对 该 
过 渡 效 果 进 行 相应 的 编辑 操作 , 包括 修改 过 渡 


1. 修改 过 渡 效 果 值 


在 【CSS 过 渡 效 果 】 面 板 中 选择 某 个 过 渡 
效果 , 单 击 【 编 辑 所 选 过 渡 效 果 】 
按钮 ， 如 图 7-24 所 示 。 

然后 ， 在 弹出 的 【编辑 过 渡 
效果 】 对 话 框 中 ， 修 改 相 应 的 效 
果 选 项 ， 单 击 【 保 存 过 渡 效 果 】 
按钮 即 可 ， 如 图 7-25 所 示 。 


2. 删除 过 渡 效 果 


当 用 户 创建 重复 或 多 余 的 
CSS 过 渡 效果 时 ， 可 通过 删除 功 
能 ,来 删除 无 用 的 CSS 过 渡 效果 。 

在 【CSS 过 渡 效果 ]】 面 板 中 ， 
选择 一 个 过 渡 效 果 ， 单 击 【 删 
除 active 伪装 】 按 钮 ， 如 图 7-26 
所 示 。 

然后 ， 在 弹出 的 【删除 过 渡 效 果 】 对 话 框 中 ， 选 择 所 需 删 除 的 规则 内 容 ， 单 击 【 删 
除 】 按 钮 即 可 ， 如 图 7-27 所 示 。 
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口 人 图 素 中 删除 类 (C) 











图 7-27 ,删除 过 渡 效 果 





兰 盯 SS 央 ~ 洲 


在 一 些 内 容 介绍 、 概 述 、 简 介 等 网 页 页 面 中 ， 会 有 许多 文字 来 描述 一 些 内 容 。 为 增 
强 其 阅读 性 ， 可 以 将 一 些 文字 字号 变 大 ， 或 者 更 改 为 其 他 颜色 等 。 本 练习 将 通过 制作 
个 “节日 简介 ”页 面 ， 来 介绍 修饰 文字 内 容 的 操作 方法 ， 如 图 7-28 所 示 。 


和 


节日 简介 


圣诞 节 (Christmas Day) 这 个 名 称 是 “ 基 首 芝 笋 " 的 缩写。 中 国 除 大 陆地 区 外 基本 翻译 为 " 耶 证 
”， 是 比较 准确 8 有 泽 。 基 冰 千 庆祝 其 信人 8 有 # 基 首 证 生 的 庆祝 日 至 儿 节 ”至 证 节 首 轨 四 时 西班牙 
至 节 美 果 人 3) 产 生 ， 被 推 到 由于 机 元 ;世纪 * 仙 8 癌 以 未 至 省 节 的 日 期 是 没有 为 了 名 确切 的 出 
生日 期 是 在 争议 的 ， 除 了 《新 约 》 以 外 ， 没 有 任何 记载 提 到 过 是 终 ; 《新 的 不 适 日期， 当然 就 没有 人 知道 确 
切 日 期 了 。 四] 


i 了 际 物 9 生 日 是 在 不 同 的 日 子 庆祝 的 * 西元 3 世纪 以 前 的 作家 们 想 把 圣诞 日 定 在 春分 日 
主教 指定 伟 罗 历 12 月 25 日 为 耶 狐 诞生 日 。 现 
后 来 圣诞 节 这 一 天 就 按 格 里 高 利 历 





法 元 纪年 的 半 及 “公历 ”未 确定 了 ， 而 日 历 接着 息 定 日 期 | 时 间 分 为 公元 前 美景 《 陡 鱼 基 普 证 生前 和 
后 《A、D， 是 拉丁 文 蝙 瑟 ,意思 是 “有 了 我 们 主 一 对 的 年 代 ”》。 后 未 ， 品 然 著 澳 孝 会 部 接 受 ! 

至 证 季 ， 但 又 因 各 地 教会 使 用 的 历 书 不 同 ,具体 日 期 不 能 统一 ， 于 是 就 把 12 月 24 晶 到 第 二 年 的 ! 月 6 日 定 

期 (Clrixtms 我 国 至 证 气氛 (7 张 )s Ti de》， 各 地 和 会 可 根据 当地 具体 情 吕 在 这 自 节 期 之 内 庆 视 至 证 节 。 


版 权 所 有 中 国人 CopyRisht(e)201272015 wr lanst con all right reserved 
公司 地 址 河南 省 xp 市 开源 路 54 号 邮编 : 455000 





和 |_ 图 7-28 节日 介绍 页 


操作 步骤 : 
贺 在 index.html 文件 中 ， 先 定义 网 页 布局 ， 如 添加 一 张 背 景 图片 ， 定 义 <div> 标 签 位 置 ， 插 入 图 片 ， 
以 及 插入 按钮 ， 如 图 7-29 所 示 。 
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和 图 7-29 ,布局 网 页 
在 页 面 中 添加 标题 内 容 ， 并 在 标题 下 面 添 加 一 条 虚线 ， 用 来 分 隔 标题 与 内 容 ， 其 代码 如 下 所 述 。 





定义 “节日 简介 ”标题 样式 ， 如 在 style.css 文件 中 添加 <h1> 选 择 器 ， 并 设置 其 样式 内 容 ， 其 代 
码 如 下 所 述 。 





在 页 面 中 插入 文本 内 容 ， 并 调整 其 段落 结构 。 例 如 ， 用 户 可 以 在 文本 之 间 添 加 <p> 标 签 ， 来 进行 
分 段 操作 ， 如 图 7-30 所 示 。 






节日 简介 
至 训 节 (Christmas 。 Day 这 个 名 称 足 “基督 已 搬 ” 。 中 国 除 大 陆地 区 外 基本 翻 
译 为 “ 耶 性 节 ”， 是 比较 准确 的 翻译 。 其 督 徒 庆 : 的 耶 鲜 基 督 诬 生 的 庆祝 日 圣 
户 . 证 节 ” 圣 谴 节 的 庆祝 与 基督 教 同 时 西班牙 (4 张 ) 产 生 ， 被 推测 始 于 西元 1 世纪 。 很 长 时 
间 以 来 圣 吝 节 的 日 期 都 是 没有 确定 的 ， 因 为 耶 钱 确 切 的 出 生日 期 是 存在 争议 的 ， 除 了 
fe 三 信 全 
切 日 期 了 。[1 


在 西元 后 的 头 三 百年 间 ， 耶 镍 的 生日 是 在 不 同 的 日 子 庆祝 的 。 西 元 3 世纪 以 前 的 作家 们 
想 把 圣诞 日 定 在 春分 日 上 下 。 直 到 西元 3 世纪 中 期 ， 基 督 教 在 罗马 合法 化 以 后 ， 西 元 

354 年 罗马 主教 指定 血路 历 12 月 25 日 为 耶稣 诞生 日 。 现 在 的 圣 谋 节 日 期 跟 西 元 纪年 的 创 
制 是 密 不 可 分 的 。 ”西元 纪年 创制 于 西元 5 世纪 ， 后 来 圣诞 节 这 一 天 就 按 格 里 高 利 历 

法 ， 即 两 元 纪年 的 美 县 “公历 ”来 确定 了 ， 而 日 历 按 着 假定 日 期 把 时 间 分 为 公元 前 美 
最 (耶稣 基督 诞生 前 ) 和 公元 后 (A。、D， 是 拉丁 文 缩写 ， 章 思 是 “有 了 我 们 主 一 耶稣 
的 年 代 ”) 。 后 来 ， 虽 然 普 记 教 会 都 接受 12 月 25 日 为 圣诞 节 ， 但 又 因 各 地 教会 使 用 的 
历 书 不 同 ， 具 体 日 期 不 能 统一 ， 于 是 就 把 12 月 24 日 到 第 二 年 的 1 月 5 日 定 为 圣 说 节 节 期 
i Tide) ， 各 地 教会 可 根据 当地 具体 情况 在 这 段 节 期 
之 证 节 。 




















图 7-30 添加 文本 内 容 


在 CSS 代码 文件 中 ， 添 加 <p> 标 签 的 样式 。 如 设置 其 字体 、 字 号 、 颜 色 和 段落 缩 进 等 ， 其 具体 代 
码 如 下 所 述 。 


童 设 SS 山 ~ 潞 


wt 
font-family:" 宋 体 "; 


font-size:12px; 
color:#666; 
text-indent :2em; 
1 
图 在 文本 中 , 针对 特殊 文字 或 者 词语 ， 添 加 <span> 标 签 和 <a> 标 签 ， 并 设置 所 应 用 的 样式 及 链接 地 
址 ， 其 具体 代码 如 下 所 述 。 
<p><span class="text_jc"> 圣 诞 节 (ChristmasDay) 
</span> 这 个 名 称 是 "<span class="text_ys"> 基 督 已 撤 " 
</span> 的 缩写 …… 


在 CSS 代码 文件 中 ， 分 别 定义 不 同文 字样 式 的 效果 ， 如 加 粗 、 改 变 字体 大 小 、 改 变 字体 颜色 等 ， 
其 具体 代码 如 下 所 述 。 








.text jc { 
font-family:" 黑 体 "; 
font-size:16px; 
font-weight:bold; 
Color:#FF6600; 

} 

-text ys { 
Color:#3399FF; 

text js + 
font-weight:bold; 
color:#333; 
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贺 此 时 ,用 户 可 以 浏览 网 页 查看 所 添加 的 效果 。 如 果 文字 添加 有 链接 , 则 在 文字 下 将 添加 有 下 画 线 ， 
如 图 7-31 所 示 。 





节日 简介 


圣诞 节 (Christmas Day) 这 个 名 称 是 “ 基 普 信和 ”的 缩写 。 中 国 除 大 陆地 区 外 基本 翻译 为 “ 耶 征 
节 ”， 是 比较 准确 的 翻译 。 基 普 徒 庆祝 其 信仰 的 子 评 基 普 证 生 的 庆祝 日 圣诞 节 ” 圣诞 节 的 庆祝 与 基 普 教 同时 西班牙 
至 证 节 美 景 (4 张 ) 产 生 ， 被 推 草 始 于 西元 1 世纪 。 很 长 时 间 以 来 圣诞 节 的 日 期 都 是 没有 确定 的 , 因为 耶 鲜 确切 的 出 
生日 期 是 存在 争议 的 ， 除 了 《新 约 以外， 没有 任何 记载 提 到 过 耶 鲜 ! 《新 约 》 不 知道 日 期 ， 当 然 就 没有 人 知道 确 
切 日 期 7。 


在 西元 后 的 头 三 百年 间 ， 耶 鲜 的 生日 是 在 不 同 的 日 子 庆 祝 的 。 西 元 3 世纪 以 前 的 作家 们 想 把 至 证 日 定 在 春分 日 
上 下 。 直到 本 元 3 世纪 中 期 ， 基 少 教 在 罗马 合法 化 以 后 ， 西 元 354 年 罗马 主教 指定 价 略 历 12 月 25 日 为 耶 鲜 诈 生日 。 现 
在 的 圣 证 节日 期 跟 西 元 纪年 的 创制 是 密 不 可 分 的 。 西元 纪年 创制 于 西元 5 世纪 ， 后 来 圣诞 节 这 一 天 就 按 格 里 高 利 历 
法 ， 即 西元 纪年 的 美景 “公历 ”未 确定 了 ， 而 日 历 按 荐 假定 日 期 iB 时 间 分 为 公元 前 美景 《 耶 匀 基督 洗 生 前 》 和 
公元 后 (A、， 是 拉丁 文 编写 ， 意思 是 “有 了 我 们 主 一 陡 针 的 年 代 ”)》。 后 来， 虽然 苦 志 教会 都 接受 12 月 25 日 为 
圣 证 节 ， 但 又 因 各 地 教会 使 用 的 历 书 不 同 ， 具 体 日 期 不 能 统一 ， 于 是 就 把 12 月 24 日 到 第 二 年 的 ! 月 6 日 定 为 至 证 节 节 
期 (Christmw 我 国 至 诞 气氛 (7 张 )s Tide) ， 各 地 教会 本 根据 当地 具体 情况 在 这 段 节 期 之 内 庆祝 至 证 节 。 


和 图 7-31 ,文本 效果 














在 网 页 制作 中 通常 使 用 CSS 和 Div， 把 页 面 分 为 Header、Nav、Main、Footer 这 4 
部 分 ， 然 后 在 Main 里 具体 又 分 为 left、right， 这 样 便 可 以 将 网 页 进行 一 层 层 的 细 分 。 在 
本 练习 中 ， 将 通过 制作 布局 产品 信息 网 页 ， 来 详细 介绍 使 用 CSS 和 Div 的 操作 方法 ， 如 
图 7-32 所 示 。 


和 志和. 拓 开 是 抽 人、 居 、 失 和 
.NFA FN 4 本 
人 要 生 -生疏 
RR PE, et 
有 要 人大 ， We 人 吉本 


和 |_ 图 7-32 产品 信息 网 页 








操作 步骤 : 

新 建 空白 网 页 ， 单 击 【 页 面 属性 ] 按钮 ， 在 数 ， 单 击 【 确定 】 按钮 ， 如 图 7-36 所 示 。 
【 页面 属性 】 对 话 框 中 ， 设 置 大 小 、 背 景 图 
像 和 边 距 ， 如 图 7-33 所 示 。 
























































































































































































































































/了 图 7-36 .定义 方 框 规则 
NS 删除 Div 中 的 文本 ,执行 【插入 】1 【图像 】 A 

《 了 7-33 草 
图 NE 命令 , 插入 “header.jpg” 图 像 , 如 图 7-37 全 
执行 【插入 ] IDiv 命令 ， 在 弹出 的 对 话 框 中 所 示 。 站 


设置 Div 的 ID， 并 单 击 【 新 建 CSS 规则 】 
按钮 ， 如 图 7-34 所 示 。 


础 





























和 图 7-34 插入 Div 
和 图 7-37 ,插入 图 像 
在 弹出 的 【新 建 CSS 规则 】 对 话 框 中 ， 单 
击 【确定 ] 按钮 ， 如 图 7-35 所 示 。 回 新 建 ID 为 “nav” 的 Div 层 ,在 【#nav 的 


CSS 规则 定义 】 对 话 框 中 设置 height 为 





















































: 一- “40px”,【 背景 图 像 ] 为 “menu_bg.gif”， 
为 Css 规则 选择 上 下 文选 择 器 类 型 。 
一 囊 其 他 设置 与 “#header” 一 样 ， 如 图 7-38 
选择 器 名 称 : i 
选择 惑 给 入 选择 器 名 称 。 所 示 。 
Wheader| 加 
内 可 元素 y 
| 
规则 定义 : 
选择 定义 规则 位置。 
【《 信 限 该 文档 ) vv 前 而 
和 图 7-35 新 建 CSS 规则 








在 弹出 的 【#header 的 CSS 规则 定义 】 对 
话 框 中 ,激活 【 方 框 ] 选项 卡 ， 设置 名 项 参 | 上 了 图 7-38。 创 建 nav 层 
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新 建 ID 为 “main” 的 Div 层 , 在 【#main 的 
CSS 规则 定义 】 对话 框 中 设置 height 为 
“620px”,【 背景 图 像 ] 为 “content_bg.gif”， 
其 他 设置 与 “#header” 一 样 , 如 图 7-39 所 示 。 





和 图 7-39 ,创建 main 层 


加 贡 除 main 层 中 的 文本 ， 创 建 ID 为 “left” 
的 Div 层 ， 在 【#left 的 CSS 规则 定义 】 对 
话 框 中 设置 Width 为 “540px”，Float 为 
“left"，Padding-left、Padding-right 均 为 
“15px”， 如 图 7-40 所 示 。 
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和 |_ 图 7-40 ,创建 left 层 


图 新 建 ID 为 “right” 的 Div 层 , 在 [【#right 
的 CSS 规则 定义 】 对 话 框 中 设置 Width 为 
“180px”，Float 为 “right”， 如 图 7-41 所 示 。 

















和 图 7-41 ,创建 right 层 





将 光标 定位 在 “nav” 层 中 ， 输 入 “网 站 首 
页 "文本 并 设置 文本 链接 , 如 图 7-42 所 示 。 





和 图 7-42 ,设置 文本 链接 
创建 名 称 为 “a1” 的 CSS 规则 ， 然 后 将 光 
标 置 于 链接 的 文本 上 , 将 [ 类 ] 设 置 为 “a1”， 

如 图 7-43 所 示 。 
有 bs 
A 全 I 








和 | 图 7-43 应 用 CSS 规则 
创建 名 为 “at:hover” 的 CSS 规则 , 在 “left” 
层 中 插入 一 个 类 名 称 为 “left” 的 Div 层 ， 
并 设置 CSS 规则 。 然 后 将 该 层 复制 一 遍 
如 图 7-44 所 示 。 
ET 
及， 0 





和 图 7-44 ,创建 类 名 称 为 “left” 的 Div 层 


在 第 1 个 类 名 称 为 “left” 的 Div 层 中 插入 
一 个 类 名 称 为 “title” 的 Div 层 ， 并 设置 其 
CSS 规则 ， 如 图 7-45 所 示 。 然 后 ， 再 创建 
一 个 普通 Div 层 。 








发 了 图 7-45 创建 类 名 称 为 “tite” 的 Div 层 

在 第 2 个 类 名 称 为 “left” 的 Div 层 中 ， 插 
入 同样 一 个 类 名 称 为 “title” 的 Div 层 和 一 
个 普通 层 ， 如 图 7-46 所 示 。 









此 处 显示 class "title" 的 
昭 | 此 处 8 示 新 Div 标 符 的 内 容 
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和 图 7-46 复制 Div 层 


分 别 在 类 名 称 为 “title” 的 Div 层 和 普通 层 
中 输入 文本 并 插入 图 像 , 选中 图 像 设 置 其 对 
齐 格式 ， 如 图 7-47 所 示 。 








草 苯 不 仅 色泽 鲜 格 ， 香 味 浓 部 ， 肉 柔 十条 ， 酿 再 适口 ， 老 细 跌 言 的 8 
\ 维生素 、 条 种 大 基本 等 ， 属 高 档 营养 水 果 ， 具 有 多 种 医疗 保健 功能 。 | 





食 的 时 鲜 水 果 ， 羡 销量 与 年 俱 
， 上 市 期 通途 元 日 、 春 节 ， 市: 
莫 除 鲜 食 外 ， 还 可 加 工 成 草 茜 4 
莫 、 草 划 定 线 、 草 苯 硅 时 与 
淋 、 莫 莫 棒 冰 等 。 草 莫 是 一 
见效 快 、 效 益 高 、 弹 性 强 凤 | 
和 方法 ， 又 宜 与 其 他 作物 间 、 




















将 光标 定位 在 ID 为 “right” 的 Div 层 中 ， 
插入 一 个 类 名 称 为 “yb” 的 Div 层 ， 并 设置 
其 CSS 规则 ， 如 图 7-48 所 示 。 








和 | 图 7-48 ,创建 类 名 称 为 “yb” 的 Div 层 

在 类 名 称 为 “yb” 的 Div 层 中 插入 一 个 类 名 
称 为 “rb” 的 Div 层 和 一 个 普通 层 ， 并 复制 
类 名 称 为 “yb” 的 Div 层 , 如 图 7-49 所 示 。 











和 | 图 7-49 ,插入 类 名 称 为 “rb” 的 Div 层 


在 第 1 个 类 名 称 为 “rb” 的 Div 层 中 输入 标 
题 文本 , 在 其 下 的 普通 层 中 创建 项 目 列表 和 
<ul> 标 签 的 CSS 规则 ， 如 图 7-50 所 示 。 





泰国 帝 皇 侍 
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日 本 丰 水 梨 
台湾 全 杨桃 


弹性 强 的 经 济 作物 ， 适 于 多 种 栽培 方 卉 性 大 利 下 澳 柑 iv 
> 








和 图 7-47 ,输入 文本 并 插入 图 像 


和 | 图 7-50 设置 项 目 列表 
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住 
人 
局 
® 
LD) 
Oo 
DD 
[=) 
上 





在 第 2 个 类 名 称 为 “rb” 的 Div 层 中 输入 标 | 网 在 文档 的 最 底部 插入 ID 为 “footer” 的 Div 
层 , 设置 CSS 规则 并 输入 文本 ,如 图 7-52 
所 示 。 


题 文 本 ， 插 入 图 片 并 创建 项 目 列表 ， 如 图 
7-51 所 示 。 

















份 ， 刚 枢 的 成 敦 期 在 七 、 作 月 
了 很 信 








好 水 果 有 有限 公司 保质 所 存 疡 权 
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LO 图 7-52 .制作 版 必 





一 、 填 空 题 


二 技术 为 网 页 提供 了 一 种 新 的 设 
计 方 式 ， 通 过 简洁 、 标 准 化 和 规范 性 的 代码 ， 提 
供 了 丰富 的 表现 形式 。 
2. 层 登 样式 表 (CSS) 是 一 组 格式 设置 规 
则 ， 用 于 控制 
3. CSS 格式 设置 规则 由 两 部 分 组 成 : 
4. 根据 CSS 样式 表 存 放 的 位 置 以 及 其 应 用 
的 范围 ， 可 以 将 CSS 样式 表 分 为 3 种 ， 即 
最 以 及 等 。 
5. Dreamweaver 中 的 CSS 样式 被 集成 在 一 
个 独特 的 [CSS 设计 器 】 面 板 中 , 包括 
电 和 4 个 窗 格 。 
6. 在 CSS 语法 规则 中 , 主要 包括 、 
和 5 














种 选择 器 。 
二 、 选 择 题 
1. 外 部 CSS 是 一 种 独立 的 CSS 样式 。 其 一 


般 将 CSS 代码 存放 在 一 个 独立 的 文本 文件 中 , 扩 
展 名 为 “ Ms 


B. .swf 
C. .html 
D. :jpg 
2. 使 用 内 部 CSS 的 好 处 在 于 可 以 将 整个 页 
面 中 所 有 的 CSS 样式 集中 管理 ， 以 选择 器 为 
供 网 页 浏览 器 调用 。 
. 集合 
样式 
函数 
D. 接口 
3. 内 联 CSS 是 利用 XHTML 标签 的 style 
属性 设置 的 CSS 样式 ， 又 称 样式 。 
A.， 外 翌 式 
B. 嵌入 式 
C. 外 联 式 
D. 关联 式 
4. 属性 用 于 检测 表格 单元 格 中 
的 内 容 ， 并 根据 其 内 容 的 有 无 决定 是 否 显示 单元 
格 的 边框 。 
A. color 
B. font 
C. empty-cells 
D. src 


5. 在 Dreamweaver 中 ， 除 了 可 以 视觉 性 地 


Nm 


创建 CSS 样式 表 之 外 ， 还 可 以 通过 创建 
CssS ,来 突出 网 页 元 素 的 动态 效果 。 

A. 背景 颜色 

B. 过 渡 效果 

C. 字体 样式 

D. 边框 样式 


三 、 问 答题 


1. 概述 CSS 样式 表 的 作用 。 
2. 简单 介绍 CSS 样式 的 几 种 类 型 。 
3. 简单 介绍 CSS 选择 器 的 概念 。 


四 、 上 机 练习 


1. 布局 产品 信息 页 面 

本 练习 中 , 首先 新 建 空白 文档 ， 设 置 页 面 属 
性 , 并 在 【代码 】 视 图 中 的 <head> 标 签 处 输入 CSS 
规则 代码 。 同 时 ， 在 【设计 】 视 图 中 ， 插 入 版 头 
和 导航 栏 Div 标签 层 ， 插 入 版 头 和 正文 图 像 ， 输 
入 导航 栏 文本 并 设置 文本 的 链接 属性 ， 如 图 7-53 
所 示 。 

2. 制作 文章 页 面 

在 本 练习 中 , 首先 打开 素材 文件 , 将 光标 定 
位 在 “leftmain”Div 层 中 ， 插 入 一 个 名 为 “title” 
的 Div 层 ,输入 标题 文本 并 设置 文本 的 链接 属性 。 
同时 ， 在 其 下 方 插入 一 个 “homeText”Div 层 ， 
并 嵌入 “homeTitle” 和 “mainHome”Div 层 。 然 


后 ， 将 光标 定位 在 “homeTitle” 层 中 ， 分 别 嵌 入 
“htitle”“publish” 和 “mark”3 个 层 。 在 “publish” 
层 中 再 嵌入 3 个 Div 层 , 关联 CSS 规则 并 输入 内 
容 文 本 ; 而 在 “tile” 和 “mark” 层 中 关联 CSS 
规则 并 输入 相应 的 文本 。 最 后 ， 将 光标 定位 在 
“mainHome”Div 层 中 ， 输 入 说 明 性 文本 ， 并 设 
置 文本 的 字体 格式 ， 如 图 7-54 所 示 。 











<p> 站 中 才 交 基 色 的 澳 光 情 怀 ， 志 天 一 色 、 凡 取 高 妆 的 纬 美 目 类 
0 它 的 和 下 疡 友 ) 北 各 的 必 共 水 涂 、 广 诅 天 吉 ， 


只 和 有 体外 过 的 人 才 
只 和 置身 北 权 的 人 冷 的 气息 ;同样 ， re 
bom 姑 
站 NSVI 在 坟 天 的 厅 国 、 a Ps 站 六 和 和 
交 让 9 引 岂 所 相 双 广 了 写作 


了 全 世界 年 权 文 性 的 时 则 之 造 。<yp> 
m <ponsy 的 疫 计 守 记 dd) 
生 拉 导入 件 ，&ldeue; 最 红 作坊 站 为 虹 红 的 六 Tar duuoixsv19 机 关 轩 
| 的 款式 本 人 时 各 的 雪 节 设计 、 好 庆 的 磊 料 以 及 时 下 湾 
于 和 计划 的 人 
Ei 闻 生 添 的 情 可 明和 吏 入 隘 装 的 设计 中 ， 取 天公 各 位 
tr tee 


sy 
:也 定义 了 红 y4 目 己 特 的 气质 驻 力 。 自 和 的 娄 人 如 半 ， Ee 


和 图 7-54 ,文章 页 面 
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网 页 表格 和 Div 标签 


8.1 应 用 Div 标签 
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首先 ， 在 网 页 中 定位 插入 Div 标签 莉 
的 位 置 。 然 后 ， 在 【插入 】 面 板 中 的 [i 、 
HTML 选项 卡 中 ， 单 击 Div 按钮 ， 如 图 上 
8-1 所 示 。 | 

在 弹出 的 【插入 Div】 对 话 框 中 ， 
可 以 命名 <div> 标 签 或 者 Div 层 的 名 称 ， 
并 单 击 【确定 】 按 钮 ， 如 图 8-2 所 示 。 





































其 中 ,【 插 入 Div】 对 话 框 中 各 选项 

的 具体 含义 ， 如 表 8-1 所 示 。 一 四 2 辆 入 DY 
35 表 8-1 。【 插 入 Div】 对 话 框 选 项 及 含义 

选 项 含 光 
将 <div> 标 签 插入 到 当前 光标 所 指示 的 位 置 
| 将 div5 标 乱 搬 入 到 选择 的 开始 标签 之 后 

将 <div> 标 签 插入 到 选择 的 开始 标签 之 前 
本 如 在 【插入 】 的 下 拉 列 表 中 选择 【在 标签 开始 之 后 】 或 【在 标签 结束 之 前 】 

选项 后 ， 即 可 在 此 列表 中 选择 文档 中 所 有 的 可 用 标签 ， 作 为 开始 标签 

Class 定义 <div> 标 签 可 用 的 CSS 类 
D 定义 <div> 标 签 在 网 页 中 唯一 的 编号 标识 
新 建 CSS 规则 根据 该 <div> 标 签 的 CSS 类 或 编号 标记 等 ， 为 该 <div> 标 签 建立 CSS 样式 















此 时 ,在 文档 中 会 显示 所 插入 、 同 sl 
的 <div> 标 签 ， 并 在 Div 层 中 显示 E 
一 段 文本 以 方便 用 户 选择 该 层 , 如 
图 8-3 所 示 。 


插入 <div> 标 签 之 后 , 便 可 以 对 其 进行 相应 的 操作 了 , 例如 添加 文本 、 添 加 Div 层 等 。 
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1. 查看 Div 层 


将 指针 移 到 <div> 标 签 上 时 ，Dreamweaver 将 高 亮 显示 此 标签 。 如 果 用 户 选择 该 Div 
层 时 ， 则 边框 将 以 “ 蓝 色 ”显示 ， 如 图 8-4 所 示 。 

另外 ， 当 用 户 在 【插入 Div】 对 话 框 中 创建 CSS 规则 之 后 ,选择 <div> 标 签 即 可 以 在 
【CSS 设计 器 】 面 板 中 查看 和 编辑 它 的 规则 ， 如 图 8-5 所 示 。 



































和 图 8-4_ 选择 <div> 标 签 & 7 图 8-5_ 编辑 CSS 规则 


2. 插入 文本 


在 Dreamweaver 中 ， 可 以 向 
<div> 标 签 中 插入 文本 。 即 ， 选 择 
该 标签 , 将 插入 点 放 在 标签 中 , 然 
后 直接 输入 文本 内 容 即 可 ， 如 图 
8-6 所 示 。 

3. 插入 多 个 Div 层 


Dreamweaver 允许 用 户 在 网 上 
页 中 插入 多 个 Div 层 。 首 先 , 将 光 
标定 位 在 已 经 插入 Div 层 的 边框 
外 。 然 后 ， 在 【插入 】 面 板 中 的 
HTML 选项 卡 中 单 击 Div 按钮 ， 
如 图 8-7 所 示 。 

然后 ， 在 弹出 的 【插入 Div】 
对 话 框 中 , 设置 各 选项 , 并 单 击 [ 确 
定 】 按 钮 ， 如 图 8-8 所 示 。 





长 了 图 8-7 .选择 插入 位 置 
此 时 , 在 文档 中 将 显示 所 插入 的 Div 层 。 用户 可 以 使 用 该 方法 , 依次 添加 更 多 的 Div 


层 ， 如 图 8-9 所 示 。 


























& 图 8-8_ 设置 Div 选项 和 图 8-9_ 插入 多 个 Div 层 


4. 插入 嵌 套 Div 层 


用 户 还 可 以 在 Div 层 中 ,插入 pg 一 pg 一 一 pe 一 
其 他 Div 层 , 并 实现 层 与 层 之 间 嵌 | 引 CSS 确 秀 壹 无 万 调 启 功 议 
套 。 首 先 ， 将 光标 置 于 已 插入 的 
Div 层 中 ， 并 在 【插入 】 面 板 中 的 
HTML 选项 卡 中 单 击 Div 按钮 ， 
如 图 8-10 所 示 。 

然后 ， 在 弹出 的 【插入 Div】 
对 话 框 中 , 设置 各 选项 , 并 单 击 [ 确 
定 】 按 钮 ， 如 图 8-11 所 示 。 和 图 8-10 .定位 位 置 

此 时 ， 可 以 看 到 所 插入 的 了 D 
为 use 层 ， 购 套 在 第 1 个 Div 层 的 内 部 ， 如 图 8-12 所 示 。 
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和 图 8-1 设置 Div 选项 人 《了 8-12 _ 嵌 套 Div 层 


典 套 Div 层 时 ， 其 被 广 套 的 二 级 Div 层 中 的 CSS 样式 将 会 使 用 第 一 级 的 Div 层 CSS 样式 。 





Dreamweaver 提供 了 可 视 化 的 方式 ， 帮 助 用 户 定义 各 种 CSS 规则 。CSS 控制 页 面 元 
素 样式 包括 类 型 、 背 景 、 区 块 性 、 方 框 、 边 框 等 9 种 属性 ， 下 面 将 详细 介绍 常用 的 7 种 























属性 。 
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在 【插入 Div】 对 话 框 中 , 单 击 


【新 建 CSS 规则 】 按钮 ， 然 后 在 弹出 “| ee 守 Wag Ewaiaa 
功 《 仅 应 用 于 一 个 mL 元 素 ) ~ 








的 【新 建 CSS 规则 】 对 话 框 中 ， 设 
置 相应 选项 ， 单 击 【确定 】 按 钮 ， | 亲王 ae。 
如 图 8-13 所 示 。 


1. 设置 【类 型 】 属 性 














pe 











在 弹出 的 【#use 的 CSS 规则 定 TR E703 
义 】 对 话 框 中 ， 选 择 【 分 类 】 列 表 
框 中 的 【类 型 】 选 项 ， 在 右 侧 列表 
中 定义 文档 中 所 有 文本 的 各 种 属 
性 ， 如 图 8-14 所 示 。 

















帮助 








8-13 【新 建 CSS 规则 】 对 话 框 





























































































































分 类 类 型 
区 二 Font-family(F) ~ 国 
2 Font-size(S) v] 国 romteiato) ~ 
站 六 Font-style(I) ~ Font—variant(Y) ~ 
革 渡 Line-height (I) vB Text-transforn(B): ~ 
Text-decoration(D): [Dunderline(y) color(C) :加 | 
overline(0) 
line-through(L) 
blink(B) 
none(H) 
E22 证 琵 _ ][ 纺 | 证 现 可 
和 图 8-14 ,设置 【类 型 】 属 性 
在 【类 型 】 属 性 中 ， 共 包含 9 种 属性 ， 如 表 8-2 所 示 。 
5 表 8-2 。【 类 型 】 规 则 属性 
典型 属性 值 及 解释 
















“微软 雅 黑 2“ 宋 体 ”等 字体 的 名 称 
可 使 用 pt 点 )、px (像素 )、em (大 写 M 高 度 ) 和 ex 
(小 写 x 高 度 ) 等 单位 

normal (正常 )、italic 〈 和 斜体 )、oblique (模拟 斜体 ) 
可 使 用 pt (点 )、px (像素 )、em (大 写 M 高 度 ) 和 ex 
(小 写 x 高度) 等 单位 ， 默认 与 字体 的 大 小 相等 ， 可 使 用 
百分比 

none (默认 值 )、underline (下 夯 线 )、line-through (删除 
线 )、overline (上 穿线 ) 

normal、bold、bolder、lighter 以 及 自 100 到 900 之 间 的 
数字 。 当 填写 数字 值 时 ,数字 越 大 则 字体 越 粗 . 其 中 400 
相当 于 normal，800 相当 于 bold，900 相当 于 bolder 


定义 文本 的 字体 类 型 
定义 文本 的 字体 大 小 
定义 文本 的 字体 样式 


Font-family 






Font-size 











Font-style 








Line-height 定义 段落 文本 的 行 高 







Text-decoration | 定义 文本 的 描述 方式 
















Font-weight 定义 文本 的 粗细 程度 


















典型 属性 值 及 解释 
定义 文本 中 所 有 小 写字 | normal (默认 值 ， 正 常 显示 )、small-caps (所 有 小 写字 母 
母 为 小 型 大 写字 母 变 为 1/2 大 小 的 大 写字 母 ) 
normal (默认 值 ， 无 转换 )、capitalize 〈 将 每 个 单词 首 字 
扑 拓 太 丰 国字 信人 | 母 转 允 为 大 写 )、upperase (将 所 有 字母 转换 为 大 写 )、 
lowercase (将 所 有 字母 转换 为 小 写 ) 
以 十 六 进 制 数字 为 基础 的 颜色 值 。 可 通过 颜色 拾取 器 进 
行 选择 


Font-variant 











Font-transform 





Color 定义 文本 的 颜色 
2. 设置 【背景 】 属 性 


【背景 】 规 则 的 作用 

































































是 设置 网 页 中 各 种 容器 背景 
对 象 的 背景 属性 。 在 该 规 Beekeeund-ooler: EEC |] 
则 所 在 的 列表 对 话 框 中 ， 全 一 一 一 一 一 
用 户 可 设置 网 页 容器 对 | | 起 Backeround-attachment(T) v 
象 的 背景 颜色 、 图 像 以 及 Backeroundposition (X) 四 | 
其 重复 的 方式 和 位 置 等 ， Reset i “| 国电 
如 图 8-15 所 示 。 

在 【背景 】 属 性 中 ， | 孝 动 ) | Cj | RW 
ee 如 表 8-3 [了 图 8-15 .设置 【背景 ] 属性 
yA o 
32& 表 8-3 【背景 】 规 则 属性 

典型 属性 值 及 解释 









定义 网 页 容器 对 象 的 背景 
颜色 


定义 网 页 容器 对 象 的 背景 
图 像 


Background-repeat 定义 网 页 容器 对 象 的 背景 
| 图 像 重 复方 式 

定义 网 页 容器 对 象 的 背景 

图 像 滚 动 方式 

Background-position(X) ey : 计 ey A bs 古称 


IE 


3. 设置 【区 块 】 属 性 


以 十 六 进 制 数字 为 基础 的 颜色 值 .可 通过 颜色 
拾取 器 进行 选择 

以 URL 地 址 为 属性 值 ， 扩 展 名 为 PEG、GIF 
或 PNG 

no-repeat (不 重复 )、repeat (默认 值 ， 重 复 )、 
Tepeat-x (水 平方 向 重复 )、repeat-y 〈 垂 直方 
向 重复 ) 等 

scroll (默认 值 ， 定 义 背 景 图 像 随 对 象 内 容 滚 
动 )、fixed (背景 图 像 固 定 ) 

长 度 值 (默认 为 0) 或 left( 居 左 )、center( 居 
中 ) 和 right( 居 右 ) 

长 度 值 ( 默 认为 0) 或 top〔 顶 对 齐 )、center 
(中 线 对 齐 ) 和 bottom 〈 底 部 对 齐 ) 


Background-color 






















Background-attachment 



















【区 块 ] 规 则 是 一 种 重要 的 规则 , 其 作用 是 定义 文本 段落 及 网 页 容器 对 象 的 各 种 属性 ， 
如 图 8-16 所 示 。 
在 【区 块 】〗 规 则 中 ， 用 户 可 设置 单词 、 字 母 之 间 插 入 的 间隔 宽度 、 垂 直 或 水 平 对 齐 
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方式 、 段 首 缩 进 值 以 及 空格 字符 的 处 理 方式 和 网 页 容器 对 象 的 显示 方式 等 ， 详 细 介 绍 如 
表 8-4 所 示 。 

















































































Word-spacingtS) ~ 车 "| 
Letter-spacing(L) vi v 
Vertical-alion(y) ~| 国 习 

Text-align(T) v 
Text-indent (I) | 习 

White-space(¥) ~ 

Displsy(D): ~ 
| 地 助 0 | [了 消 “] EN 本 
和 图 8-16 ,设置 【区 块 】 属 性 
3 表 8-4 。 【区 块 】 规 则 属性 
属 性 名 作 用 典型 属性 值 或 解释 
定义 段落 中 各 单词 之 间 插 


Word-spacing 入 的 间隔 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 


De pe i 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 


baseline (基线 对 齐 )、sub (对 齐 文本 的 下 标 )、super (对 
齐 文本 的 上 标 )、top〔 顶 部 对 齐 )、text-top (文本 项 前 
对 齐 )、middle (居中 对 齐 )、bottom (底部 对 齐 )、 
text-bottom (文本 底部 对 齐 ) 

Ss left (文本 左 对 齐 )、right (文本 右 对 齐 )、center (文本 
定义 段落 首 行 的 文本 缩 进 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 认 值 
距离 为 0 


normal (XHTML 标准 处 理 方式 ， 默 认 值 ， 文 本 自动 换 
White space ST 行 )、pre (换行 或 其 他 空白 字符 都 受到 保护 )、nowrap 
(强制 在 同一 行内 显示 所 有 文本 ， 直 到 BR 标签 之 前 ) 


display 属性 共有 18 种 属性 ,IE 浏览 器 支持 其 中 的 7 种 
即 block( 显 示 为 块 状 对 向 )、none〔 隐 藏 对 象 )、inline 
(显示 为 内 联 对 象 )、inline-block〈 显 示 为 内 联 对 象 ， 但 
对 其 内 容 做 块 状 显 示 )、list-item (将 对 象 指定 为 列表 项 
目 ， 并 为 其 添加 项 目 符号 )、table-header-group (将 对 象 
指定 为 表格 的 标题 组 显示 ) 以 及 table-footer-group〈 将 
对 象 指 定 为 表格 的 脚注 组 显示 ) 等 


Vertical-align | 定义 段落 的 垂直 对 齐 方式 


Text-indent 





Display 





4. 设置 【 方 框 】 属 性 


【 方 框 】 规则 的 作用 是 定义 网 页 中 各 种 容器 对 象 的 属性 和 显示 方式 ， 如 图 8-17 所 示 。 
在 【 方 框 】 规 则 中 ， 用 户 可 设置 网 页 容器 对 象 的 宽度 、 高 度 、 浮 动 方式 、 禁 止 浮动 














方式 ， 以 及 网 页 容器 内 部 和 外 部 的 补丁 等 。 根 据 这 些 属性 ， 月 


日 户 可 方便 地 定制 网 页 容器 








对 象 的 位 置 ， 如 表 8-5 所 示 。 










































































类 
有 
提 Width(y) ~ nt ~ 
Height (N) vB cesec) ~ 
到 Padding Nargin 
回 全 部 相同 (S) 回 全 部 相同 G) 
过 鼻 Top(P) ee Top(0) vm ~ 
Right(R) px ~ Right(6) px ~ 
Botton(B) a ott 六 > 
Left(L) ett wm > 
部 助 人 0 巴松 ][ 驴 | 古琴 册 
上 了 图 8-17 ,设置 【 方 框 】 属 性 


22 表 8-5 。【 方 框 】 规 则 属性 

































































属 性 名 作 用 典型 属性 值 或 解释 
var | 由 浮 点 数字 和 单位 组 成 的 宽度 值 ， 默 认 值 可 在 【 纺 
Width 定义 网 页 容器 对 象 的 宽度 辑 】|【 首 选 参数 】|【AP 元 中 定义 
由 浮 点 数字 和 单位 组 成 的 高 度 值 ， 默 认 值 可 在 【 编 
a 定义 网 页 容器 对 象 的 高 度 ”| 辑 】 | [首选 参数 】 | [AP 元素】 中 定义 
a 定义 网 页 容器 对 象 的 浮动 | left( 左 侧 浮动 )、right ( 右 侧 浮动 )、none (不 浮动 ， 
方式 默认 值 ) 
| 定义 网 页 容器 对 象 的 禁止 | left 《禁止 左 侧 浮动 )、right (禁止 右 侧 浮动 )、both 
Ee 浮动 方式 (禁止 两 侧 浮动 )、none (不 禁止 浮动 ， 默 认 值 ) 
et 定义 网 页 容器 对 象 的 顶部 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
ee 内 补丁 认 值 为 0 
es 定义 网 页 容器 对 象 的 右 侧 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
| 认 值 为 0 
aadindlBotom | 定义 网 页 容器 对 象 的 底部 | 由 浮 点 数字 和 单位 组成 的 长 度 值 ， 旬 许 为 负 值 ， 黑 
攻 内 补丁 认 值 为 0 
定义 网 页 容器 对 象 的 左 侧 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
| 全 相 下 认 值 为 0 
oe 定义 网 页 容器 对 象 的 顶部 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
ES 外 补丁 认 值 为 20 
二 定义 网 页 容器 对 象 的 右 侧 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
marmite Tn 认 值 为 15 
MeareinlBottom | 定义 网 页 容器 对 象 的 底部 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
a 外 补丁 认 值 为 0 
定义 网 页 容器 对 象 的 左 侧 | 由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 允 许 为 负 值 ， 默 
Margin|Left 











外 补丁 认 值 为 0 


5. 设置 【边框 】 属 性 


【边框 ] 规 则 的 作用 是 定义 网 页 容器 对 和 象 的 4 条 边框 线 样式 。 在 【边框 】 规则 中 ，Top 
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代表 顶部 的 边框 线 ，Right 代表 右 侧 的 边框 线 ，Bottom 代表 底部 的 边框 线 ， 而 Left 代表 
左 侧 的 边框 线 。 如 用 户 选择 【全 部 相同 】 则 4 条 边框 线 将 被 设置 为 相同 的 属性 值 ， 如 图 
8-18 所 示 。 





Style Width 
回 全 部 相同 (S) 回 全 部 相同 人) 
Top(T) : ~ ~ 
































Right(R) : 
Bottom(B) : 
Left(L) : 




















帮助 (内 


和 图 8-18 .设置 【边框 】 属 性 

















在 【边框 】 属 性 中 ， 共 包含 3 种 类 型 的 属性 ， 如 表 8-6 所 示 。 
3 表 8-6 。 【边框 】 规 则 属性 









典型 属性 值 及 解释 







ridge (3D 凸 模 )、inset (3D 周边 )、outset (3D 凸 边 ) 
由 浮 点 数字 和 单位 组 成 的 长 度 值 ， 默 认 值 为 0 

以 十 六 进 制 数字 为 基础 的 颜色 值 。 可 通过 颜色 拾取 器 进行 
选择 










Width 


定义 边框 线 的 宽度 


定义 边框 线 的 颜色 


Color 





6. 设置 【列表 】 属 性 
【列表 】 规 则 的 作用 













































































是 定义 网 页 中 列表 对 象 | 下 

的 各 种 相关 属性 ,包括 列 List-style-typelt) = 

表 的 项 目 符号 类 型 、 项 目 List-style-image(I): ~v|[ 3 小.… 

符 时 图 像 以 及 列表 项 目 List-style-Position(P): ~ 

的 定位 方式 等 , 如 图 8-19 

wi 地 助人 0 证 酸 ][ 台 | 古琴 g 
在 【列表 】 属 性 中 ， 


共 包 含 3 种 属性 ,如 表 8-7 在 了 图 8-19 .设置 【列表 】 属 性 
所 示 。 


sg 表 827 


【列表 】 规 则 属性 









典型 属性 值 及 解释 
dise〔 实 心 圆 项 目 符号 , 默认 值 )、circle (空心 圆 项 目 符 
号 )、square( 和 矩形 项 目 符号 )、decimal (阿拉 伯 数 字 )、 
lower-roman (小 写 罗马 数字 )、upper-roman (大 写 罗 马 
数字 )、lower-alpha (小 写 英 文字 母 )、upper-alpha (大 
写 英 文字 母 )》 以 及 none (无 项 目 列表 符号 ) 

none (默认 值 , 不 指定 图 像 作为 项 目 列表 符号 ), url(file) 
(指定 路 径 和 文件 名 的 图 像 地 址 》 

outside (将 列表 项 目 符号 放 在 列表 之 外 ， 且 环绕 文本 ， 
不 与 符号 对 齐 ， 默 认 值 )、inside 将 列表 项 目 符号 放 在 
列表 之 内 ， 且 环绕 文本 根据 标记 对 齐 ) 









定义 列表 的 项 目 符号 


List-style-type 类 型 
类 型 











自 定义 列表 的 项 目 符 
号 图 像 

定义 列表 的 项 目 符号 
所 在 位 置 


List-style-image 





List-style-Position 








7. 设置 【定位 】 属 性 


【定位 】 规 则 多 用 于 
CSS 布局 的 网 页 ， 可 设置 
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各 种 AP 元 素 、 层 的 布局 
s osition(P) ~v isibilityf v 
属性 ， 如 图 8-20 所 示 。 : a px ~ y 4 ~ 
在 【定位 】 规 则 中 ， Height (1) -| 本 天 Overflon(F) 
Width 和 Height 两 个 属性 Placement Clip 
a Top(0) ~| 国 汪 Top(T) ~] 属 hd 
与 【 方 框 】 规 则 中 的 同名 到 司 国 国 国 | :so 5 
属性 完全 相同 , Placement Botton(B) 司 国 国 国 | :co -| 
属性 用 于 设置 AP 元 素 的 Left(L) ~ Left(E) v]m ~ 
定位 方式 ,Clip 属性 用 于 es 
设置 AP 元 素 的 剪 切 方 一 EE 
式 ， 各 属性 介绍 如 表 8-8 [了 图 8-20 .设置 【定位 】 属性 
所 示 。 
5 表 8-8 ,【 定 位 】 规 则 属性 
属 性 名 典型 属性 值 及 解释 
absolute 〈 绝 对 定位 方式 ， 以 Placement 属性 的 值 定义 
， VTAa th | 网 页 容器 对 象 的 位 置 )、fixed (IE 7 以 上 版 本 支持 ， 考 
Position ee 从 绝对 定位 方式 ,但 需要 遵守 一 些 规则 )、relative ( 遵 
S 从 绝对 定位 方式 ， 但 对 象 不 可 层 释 )、static (默认 值 ， 
无 特殊 定位 ， 遵 从 XHTML 定位 规则 ) 

Visibility 定义 网 页 容器 对 象 的 | inherite (默认 值 ， 继 承 父 容器 的 可 见 性 )、visible (对 
显示 方式 象 可 视 )、hidden (对 象 隐藏 ) 
| (默认 值 ， 根 据 容器 在 网 页 中 的 排列 顺序 指定 层 

a 定义 网 页 容器 对 象 的 | 各 顺序 ) 以 及 整 型 数值 (可 为 负 值 ， 数 值 越 大 则 层 革 
层 肢 顺序 Ny 

优先 级 越 高 ) 
visible( 默 认 值 ， 溢 出 部 分 可 见 )、hidden( 溢 出 部 分 
Ce 定义 网 页 容器 对 象 的 | 隐藏 )、scroll (总 是 以 党 动 条 的 方式 显示 溢出 部 分 )、 


溢出 设置 





auto〔 在 必要 时 自动 裁 切 对 象 或 像 是 滚动 条 ) 


续 表 


属 四 曲 型 属 直 及 解释 


























Top 定义 网 页 容器 对 象 与 | auto( 默 认 值 ， 无 特殊 定位 〉 以 及 由 浮 点 数字 和 单位 
父 容器 的 项 部 距离 组 成 的 长 度 值 ， 可 为 负数 
”| 定义 网 页 容器 对 象 与 | auto 《默认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 
Right | 父 容器 的 右 侧 距离 。 | 组 成 的 长 度 值 ， 可 为 负数 
本 定义 网 页 容器 对 象 与 auto〈 默 认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 
父 容器 的 左 侧 距 离 组 成 的 长 度 值 ， 可 为 负数 
Th | 定义 网 页 容器 对 银 与 | auto 默认 信和， 天 特殊 定位 》 以 及 二 学 点 数字 和 单位 
多 容器 的 底部 距离 。 | 组 成 的 长 度 值 ， 可 为 负数 
Top 定义 网 页 容器 对 象 项 | auto 〈 默 认 值 ， 无 特殊 定位 ) 以 及 由 浮 点 数字 和 单位 
部 前 切 的 高 度 组 成 的 长 度 值 ， 可 为 负数 
”| 定义 同 页 容器 对 象 右 | auto 《默认 值 ， 无 特殊 定位 )》 以 及 由 浮 点 数字 和 单位 
ee Right | 全 前 切 的 宽度 组 成 的 长 度 值 ， 可 为 负数 
Buen | 定义 网 页 容器 对 旬 底 | auto (默认 值 ， 无 特殊 定位 以 及 由 浮 点 数字 和 单位 
部 前 切 的 高 度 组 成 的 长 度 值 ， 可 为 负数 
Th | 定义 网 页 容器 对 象 直 | auto 默认 们 ， 天 特殊 定位 》 以 及 由 浮 点 数字 和 单位 
例 前 切 的 宽度 组 成 的 长 度 值 ， 可 为 负数 


N 
所 
oo 
D 
© 
be 
一 
版 














在 Dreamweaver 中 ,表格 的 主要 功能 是 对 网 页 元 素 进行 定位 与 排版 。 熟 练 地 运用 表 
格 ， 不 仅 可 以 任意 定位 网 页 元 素 ， 而 且 还 可 以 丰富 网 页 的 页 面 效果 。 








Dreamweaver 为 用 户 提供 了 极 | 
其 方便 的 插入 表格 的 方法 。 首 先 ， 
在 网 页 中 将 光标 定位 在 所 需 插 入 表 Bb 
格 的 位 置 。 然 后 ， 执 行 【 揪 入 】| 
【表格 】 命 令 ,或 者 在 【插入 】 面 上 
板 中 的 HTML 选项 卡 中 单 击 Table 鼎 
按钮 ， 如 图 8-21 所 示 。 

然后 ， 在 弹出 的 Table 对 话 框 《了 图 8-21 .选择 插入 位 置 
中 , 设置 相应 的 参数 , 单 击 【确定 】 


























按钮 ， 即 可 在 网 页 中 插入 一 个 表格 ， 如 图 8-22 所 示 。 






































二 mm 梁 









































淋 河 司 


和 


和 图 8-22 ,Table 对话 框 
在 Table 对 话 框 中 ， 主 要 包括 表 8-9 中 的 一 些 选项 。 
22 表 8-9 , 【Table】 对 话 框 选项 


选 项 
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作 “用 

指定 表格 行 的 数目 

指定 表格 列 的 数目 

以 像素 或 百分比 为 单位 指定 表格 的 宽度 

以 像素 为 单位 指定 表格 边框 的 宽度 

指定 单元 格 边 框 与 单元 格 内 容 之 间 的 像素 值 

指定 相 邻 单元 格 之 间 的 像素 值 

对 表格 不 启用 行 或 列 标题 

将 表格 的 第 一 列 作为 标题 列 ， 以 便 可 为 表格 中 的 每 一 行 输入 一 个 标题 
将 表格 的 第 一 行 作为 标题 行 ， 以 便 可 为 表格 中 的 每 一 列 输入 一 个 标题 
在 表格 中 输入 列 标题 和 行 标题 

提供 一 个 显示 在 表格 外 的 表格 标题 

用 于 输入 表格 的 说 明 





顽 套 表格 是 在 另 一 个 表格 单元 格 中 插入 的 表格 ， 其 设置 属性 的 方法 与 任何 其 他 表格 
相同 。 首 先 ， 在 网 页 中 插入 一 个 表格 ， 并 将 光标 置 于 表格 中 任意 一 个 单元 格 内 。 然 后 ， 





在 【插入 】 面 板 中 的 HIML 选项 卡 中 
单 击 Table 按钮 ， 如 图 8-23 所 示 。 

在 弹出 的 Table 对 话 框 中 , 设置 相 
应 的 参数 ， 单 击 【 确 定 】 按 钮 ， 即 可 
在 原 表格 中 插入 一 个 表格 。 此 时 ， 所 
插入 的 表格 对 于 原先 表格 称 之 为 嵌 套 
表格 ， 如 图 8-24 所 示 。 
































创建 表格 之 后 ， 用 户 便 可 以 向 表 上 
格 中 添加 文本 或 图 像 了 ， 其 添加 方法 
与 普通 输入 文本 和 插入 图 像 的 方法 大 下 
体 一 致 。 























1. 输入 文本 有 
首先 ， 将 光标 定位 在 表格 中 的 任 上 
意 一 个 单元 格 中 。 然 后 ， 在 单元 格 中 





直接 输入 文本 即 可 ， 如 图 8-25 所 示 。 

在 表格 中 输入 文本 时 ， 当 表格 的 
单位 为 百分比 〈%) 时 ， 其 单元 格 
的 宽度 将 随 着 内 容 不 断 增多 而 向 右 “| 岂 并 茶 属 于 绿茶 
延伸 。 

当 表 格 的 单位 为 像素 时 ， 其 单元 
格 的 宽度 不 会 随 着 内 容 增多 而 发 生变 
化 ; 而 单元 格 的 高 度 则 会 随 着 内 容 的 
增多 而 发 生变 化 。 


2. 插入 图 像 
图 8-25 .输入 文本 

首先 ， 将 光标 定位 在 表格 中 的 任 te 
意 一 个 单元 格 中 ， 并 在 【插入 】 面 板 | 吉 gy 二 
中 的 HIML 选项 卡 中 单 击 Image 按 HIME 
钮 ， 如 图 8-26 所 示 。 

然后 ， 在 弹出 的 【选择 图 像 源 文 
件 】 对 话 框 中 选择 图 片 文件 , 单 击 【 确 
定 】 按 钮 即 可 ， 如 图 8-27 所 示 。 

此 时 ， 在 所 选中 的 单元 格 中 ， 将 
显示 插入 的 图 像 。 用 户 可 以 使 用 调整 [了 图 8-26 .插入 图 像 元 素 
图 像 的 操作 方法 ， 来 调整 单元 格 中 的 
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图 像 大 小 ， 如 图 8-28 所 示 。 





























人 了 图 8-27 .选择 图 像 文 件 人 了 图 8-28 .调整 图 像 
9 - -82:4 设置 属性 -- 


对 于 文档 中 已 创建 的 表格 ， 可 以 通过 【属性 】 面 板 来 设置 表格 的 结构 、 大 小 、 显 示 
样式 效果 等 表格 属性 。 


1. 设置 表格 属性 


选择 表格 ， 在 【属性 】 面 板 中 将 显示 该 表格 的 基本 属性 ， 包 括 表 格 的 ID 名称、 列 
数 、 行 数 、 对 齐 方式 等 属性 ， 如 图 8-29 所 示 。 

































































FF 表格 行 (8) 3。 | 宽 () 412 | 伪 素 ~| calpaa 二 区 人 v Gless| 元 到 
一 ve | ‘ellSpace Border [1 

早操 RG ee 

巨 
和 图 8-29_,【 属 性】 面板 


其 中 ,【 属 性 】 面 板 中 各 选项 的 具体 含义 ， 如 表 8-10 所 示 。 
33 表 8-10 表格 属性 选项 及 作用 
















用 于 定义 表格 在 网 页 文档 中 唯一 的 编号 标识 
用 于 定义 表格 中 包含 的 行 数量 

用 于 设置 表格 的 宽度 ， 可 直接 输入 数值 ， 单 位 为 像素 或 百分比 
用 于 定义 表格 中 包含 的 列 数量 














CellPad 用 于 设置 单元 格 边框 与 内 容 之 间 的 距离 ， 单 位 为 像素 
CellSpace 用 于 设置 单元 格 之 间 的 距离 ， 单 位 为 像素 
Alibs 用 于 设置 表格 中 单元 格 内 容 的 对 齐 方式 ， 包 括 【默认 】【 左 对 


齐 站 【居中 对 齐 】 和 【 右 对 齐 】4 种 方式 
用 于 设置 表格 边框 的 格式 ， 单 位 为 像素 
用 于 设置 表格 的 类 CSS 样式 
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续 表 






将 已 定义 宽度 的 表格 宽度 清除 ， 转 换 为 无 宽度 定义 的 表格 ,使 
表格 随 内 容 增加 而 自动 扩展 宽度 

将 已 定义 行 高 的 表格 行 高 清除 ， 转 换 为 无 行 高 定义 的 表格 ， 使 
表格 随 内 容 增 加 而 自动 扩展 行 高 

将 以 百分比 为 单位 的 表格 宽度 转换 为 具体 的 以 像素 为 单位 的 
表格 宽度 

将 以 像素 为 单位 的 表格 宽度 转换 为 具体 的 以 百分比 为 单位 的 
表格 宽度 

如 在 设计 表格 时 使 用 了 Fireworks 源 文件 作为 表格 的 样式 设置 ， 
则 可 通过 此 项 目 管理 Fireworks 的 表格 设置 ， 并 将 其 应 用 到 表 
格 中 









清除 列 宽 图 





清除 行 高 加 


功能 
按钮 





将 表格 宽度 转换 成 像素 加 


将 表格 宽度 转换 成 百分比 到 
Fireworks 源 文件 


2. 设置 单元 格 属性 


选择 表格 中 的 任意 一 个 单元 格 ， 在 【属性 】 面 板 中 将 显示 该 单元 格 的 基本 属性 ， 包 
括 合 并 所 选单 元 格 、 背 景 颜色 、 标 题 等 属性 ， 如 图 8-30 所 示 。 











无 ~| BI 和 汉 扣 振 闪 标题 (T) 
>| 提 二 ”目标 人 
点 认 | “| 不 换行 (0) 口 ”背景 颜色 (c) -|| ] 页面 属 性 | 
点 认 ]」 标题 全 口 


和 图 8-30 。【 属 性 】 面 板 


其 中 ,【 属 性 】 面 板 中 有 关 单 元 格 属性 的 各 选项 的 具体 含义 ， 如 下 所 述 。 

口 合并 所 选单 元 格 ， 使 用 跨度 国 ”将 所 选 的 多 个 同行 或 同 列 单元 格 合并 为 一 个 单 
元 格 。 

口 拆 分 单元 格 为 行 或 列国 ”将 已 选择 的 位 于 多 行 或 多 列 中 的 独立 单元 格 折 分 为 多 

个 单元 格 。 

水 平 定义 单元 格 中 内 容 的 水 平 对 齐 方式 。 

垂直 定义 单元 格 中 内 容 的 生 直 对 齐 方式 。 

宽 定义 单元 格 的 宽度 。 

高 定义 单元 格 的 高 度 。 

不 换行 ”选中 该 项 目 单元 格 中 的 内 容 将 不 自动 换行 ,单元 格 的 宽度 也 将 随 内容 的 

增加 而 扩展 。 

口 标题 选中 该 项 目 ， 则 将 普通 的 单元 格 转换 为 标题 单元 格 ， 单 元 格 内 的 文本 加 粗 

并 水 平 居中 显示 。 

口 背景 颜色 ” 单 击 该 项 目的 颜色 拾取 器 ， 可 选择 颜色 并 将 颜色 应 用 到 单元 格 背 


景 中 。 


8.3 ”编辑 表格 


创建 表格 之 后 ， 为 使 表格 符合 网 页 的 整体 设计 要 求 ， 还 需要 对 表格 进行 选择 、 添 加 







































































马 包 局 总 总 





行 或 列 、 调 整 大 小 等 一 系列 的 编辑 操作 。 


调整 表格 是 调整 表格 的 大 小 ， 以 及 添加 或 删除 表格 行 或 列 等 操作 ， 既 确保 了 整个 网 
页 的 布局 符合 设计 要 求 ， 又 准确 地 定位 网 页 中 的 各 个 元 素 。 


1. 调整 表格 大 小 


选择 整个 表格 之 后 , 用 户 会 发 现在 表格 的 右边 框 、 下 边框 和 右 下 角 出 现 3 个 控制 点 。 
此 时 , 将 光标 移 至 控制 点 上 , 当 光 己 T 
标 变 成 “双向 箭头 ”时 ， 拖 动 鼠 标 
即 可 调整 表格 的 大 小 ， 如 图 8-31 
另外 , 将 光标 移动 到 单元 格 的 
边框 上 ， 当 光标 变 成 “左右 双向 箭 
头 ” 中 或 者 “上 下 双向 箭头 ”地 时 ， 
拖 动 鼠标 即 可 调整 单元 格 的 行 高 
或 列 宽 ， 如 图 8-32 所 示 。 


提 ” 示 



















































2. 添加 表格 行 与 列 


选择 任意 一 个 单元 格 ， 执 行 
【修改 代表 格 】 从 插入 行 】 命 令 ， 
或 者 右 击 表格 , 执行 【表格 】I【 插 
入 行 】 命 令 ， 即 可 在 所 选单 元 格 
的 上 方 插入 一 个 新 行 ， 如 图 8-33 
所 示 。 

另外 , 用 户 也 可 以 右 击 , 执行 
【表格 】| 【插入 列 】 命 令 ， 在 所 选 
单元 格 的 左 侧 插入 一 个 新 列 。 或 者 
单 击 表格 列 标题 , 在 展开 的 菜单 中 
选择 【 左 侧 插入 列 】 或 在 【 右 侧 插 
入 列 】 命 令 ， 选 择 性 地 插入 新 列 ， 《7 图 8-33 .插入 行 
如 图 8-34 所 示 。 

















合并 单元 格 (M) Cul+Ak+M 
拆 分 单元 格 (P)-， Ctrl+Ak+Shift+T 
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除 此 之 外 , 用户 还 可 以 右 击 表格 ， 
执行 【表格 】|【 插 入 行 或 列 】 命 令 ， 
在 弹出 的 【插入 行 或 列 】 对 话 框 中 ， 
设置 所 添加 行 或 列 的 数目 和 位 置 ， 如 和 
图 8-35 所 示 。 





















































O 列 (Cc) 
在 网 页 设计 过 程 中 ， 经 常会 遇 到 行 数 0:[ 厂 图] 
一 些 不 规则 的 数据 排列 。 此 时 ， 可 通 位 置 : 〇 所 选 之 上 (A) 
过 合并 或 拆 分 单元 格 的 方法 ， 使 网 页 @ 所 选 之 下 (B) 








的 排版 样式 符合 网 页 的 设计 要 求 。 
1. 合并 单元 格 


合并 单元 格 可 以 将 同行 或 | 
同 列 中 的 多 个 连续 单元 格 合并 
为 一 个 单元 格 ， 但 所 选 连续 的 | 
单元 格 必 须 可 以 组 成 一 个 矩形 
形状 ， 否 则 将 无 法 合并 单元 格 。 | 

选择 两 个 或 两 个 以 上 连续 【ze 
的 单元 格 ， 执 行 【修改 |【 表 目 
格 】|【 合 并 单元 格 】 命 令 ， 或 
在 【属性 】 面 板 中 单 击 【合并 
所 选单 元 格 】 按 钮 抹 ， 即 可 将 。 
所 选 的 多 个 单元 格 合并 为 一 个 
单元 格 ， 如 图 8-36 所 示 。 
撕 


| » 


2. 拆 分 单元 格 TPR 


在 了 图 8-35_。[【 插 入 行 或 列 】 对 话 框 



































拆 分 单元 格 可 以 将 一 个 单 图 8-37 选择 单元 格 
元 格 以 行 或 列 的 形式 拆 分 成 多 人 时 一 和 二 
个 单元 格 。 选 择 所 需 拆 分 的 单元 格 ， 执 行 【修改 】 | 【表格 】|【 拆 分 单元 格 】 命 令 ， 或 者 
单 击 【 属 性 】 面 板 中 的 【 拆 分 单元 格 为 行 或 列 】 按 钮 昼 ， 如 图 8.37 所 示 。 





然后 , 在 弹出 的 【 拆 分 单元 
格 】 对 话 框 中 选中 【 行 】 或 【 列 】 
选项 , 并 设置 所 需 拆 分 的 行 或 列 
数 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 ne 
图 8-38 所 示 。 把 单元 格 拆 分 @ 行 (R) 


Oc) 
技巧 行 数 咱 : 


| 和 | 图 8-38_。 拆 分 单元 格 





























8.4 “处理 表格 数据 





Dreamweaver 除了 为 用 户 提供 插入 表格 、 编 辑 和 设置 表格 属性 等 基础 表格 功能 之 外 ， 
还 为 用 户 提供 了 排序 表格 数据 和 导入 /导出 表格 数据 等 数据 处 理 功能 ， 以 方便 用 户 使 用 外 
部 数据 来 设计 网 页 。 


排序 数据 是 指 按照 一 定 的 规律 对 表格 内 的 单列 数据 进行 升序 或 降序 排列 。 

选择 表格 ， 执 行 【 命 令 】|【 排 序 表 格 】 命 令 。 在 弹出 的 【排序 表格 】 对 话 框 中 ， 设 
置 相应 选项 ， 单 击 【 确 定 】 按 钮 即 可 ， 
如 图 8-39 所 示 。 

其 中 ,【 排 序 表格 】 对 话 框 中 ,各 选 
项 的 具体 含义 ， 如 下 所 述 。 

口 排序 按 用 于 设置 进行 排序 所 





















































依据 的 列 。 
口 顺序 (顺序 按 ) 用 于 设置 排序 | 选 页 口 排序 电信 第 一 行 
的 顺序 和 方向 ,选择 【 按 字 母 顺 i 
序 】 选 项 将 按照 字母 的 排列 进行 完成 排序 语 所 有 行 新 色 保 持 不 变 














排序 ， 而 选择 【 按 数 字 顺序 】 选 





项 则 按照 数字 的 排列 进行 排序 。 故 了 图 8-39 【排序 表格 】 对 话 杠 
当选 择 【升序 】 方 向 时 ， 则 表示 
排序 按照 数字 从 小 到 大 ， 字 母 从 A 到 Z 的 方向 进行 排列 ; 当选 择 【 降 序 】 方 向 
时 ， 则 表示 排序 按照 数字 从 大 到 小 ， 字 母 从 Z 到 A 的 方向 进行 排列 。 
口 再 按 用 于 设置 进行 排序 所 依据 的 第 二 依据 的 列 。 
口 顺序 〈 再 按 ) 用 于 设置 第 二 依据 的 排序 顺序 和 方向 。 
口 排序 包含 第 一 行 ”启用 该 复 选 框 ， 可 以 将 表格 第 一 行 包 含 在 排序 中 。 
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口 排序 标题 行 ” 启 用 该 复 选 框 , 可 以 指定 使 用 与 主体 行 相同 的 条 件 对 表格 的 标题 部 
分 中 的 所 有 行进 行 排序 。 

口 排序 脚注 行 ” 启 用 该 复 选 框 , 可 以 指定 按照 与 主体 行 相同 的 条 件 对 表格 的 脚注 部 
分 中 所 有 的 行进 行 排序 。 

口 完成 排序 后 所 有 行 颜色 保持 不 变 启用 该 复 选 框 , 可 以 指定 排序 之 后 表格 行 属性 
应 该 与 同一 内 容 保 持 关 联 。 





Dreamweaver 为 用 户 提供 了 导入 /导出 表格 数据 功能 ， 通 过 该 功能 不 仅 可 以 将 文本 格 
式 、Excel 和 Word 等 格式 的 数据 导入 到 Dreamweaver 中 ， 而 且 还 可 以 将 Dreamweaver 
中 的 数据 导出 为 普通 的 表格 式 数据 。 

1， 导 入 表格 式 数据 


在 Dreamweaver 文档 中 ， 执 行 【 文 件 ] 区 导入】 代表 格式 数据 】 命 令 , 在 弹出 的 【 导 

入 表格 式 数据 】 对 话 框 中 ， 设 置 相应 选项 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 图 8-40 所 示 。 

其 中 ， 在 【导入 表格 式 数据 】 对 

话 框 中 ， 主 要 包括 下 列 7 种 选项 : 

口 数据 文件 用 于 设置 所 需 导 
入 的 文件 路 径 ， 可 通过 单 击 
【浏览 】 按 钮 ， 在 弹出 的 对 话 
框 中 选择 导入 文件 。 一 | 画 - 

口 定 界 符 用 于 设置 导入 文件 
中 所 使 用 的 分 隔 符 , 包括 【 运 
号 下 【引号 下 【分 号 】 Tab [了 图 8-40 。【 导 入 表格 式 数据 】 对 话 杠 
和 【其 他 】5 种 分 隔 符 ; 当 用 
户 选择 “其 他 ”分 隔 符 时 ， 则 需要 在 右 侧 的 文本 框 中 输入 新 的 分 隔 符 。 

口 表格 宽度 ”用 于 设置 表格 的 宽度 ， 选 中 【匹配 内 容 】〗 选 项 可 以 使 每 个 列 足够 宽 以 
适应 该 列 中 最 长 的 文本 字符 串 ; 选中 【设置 为 〗 选 项 既 可 以 以 像素 为 单位 指定 表 
格 的 固定 列 宽 ， 又 可 以 按照 浏览 器 窗口 宽度 的 百分比 来 指定 表格 的 列 宽 。 

口 单元 格 边 距 用 于 指定 单元 格 内 容 与 单元 格 边框 之 间 的 距离 ， 以 像素 为 单位 。 

口 单元 格 间距 用 于 指定 相 邻 单元 格 之 间 的 距离 ， 以 像素 为 单位 。 

口 格式 化 首 行 ”用 于 设置 表格 首 行 的 格式 ， 包 括 【无 格式 】【 粗 体 】【 针 体 ] 和 【加 
粗 斜 体 】4 种 格式 。 

口 边框 ”用 于 指定 表格 边框 的 宽度 ， 以 像素 为 单位 。 


2. 导入 Excel 数据 
在 Dreamweaver 文档 中 ， 选 择 导 入 位 置 ， 执 行 【文件 】|【 导 入 】|【Excel 文档 】 





















































命令 , 在 弹出 的 【导入 Excel 3 和 Excel 文科 
文档 】 对 话 框 中 选择 Excel 卉 OO: [上 JJ6ae- 
文件 ， 单 击 【 打 开 】 按 钮 ， 
如 图 8-41 所 示 。 

此 时 ， 用 户 可 以 在 
Dreamweaver 文档 中 ， 查 看 





























所 导入 的 Excel 文档 中 的 数 [oroft EeeL I 作家 wlsx | 
据 。 对 于 导入 的 Excel 数据 2 | ft 二 | 
表 ， 用 户 也 可 以 选择 该 表 ， : 文本 区、 剖 本 入 式 (下 栖 \ 和 林立 
在 【属性 】 面板 中 设置 表 清理 Word 扑 革 间距 (C) 


格 的 基本 属性 ， 如 图 8-42 


3. 导入 Word 数据 


山名 





在 Dreamweaver 文档 
中 , 选择 导入 位 置 , 执行 [ 文 
件 】I【 导 入 】I【Word 文档 】 
命令 , 在 弹出 的 【导入 Word 
文档 】 对 话 框 中 选择 Word 
文件 ， 单 击 【 打 开 】 按 钮 ， 
如 图 8-43 所 示 。 

此 时 ， 用 户 可 以 在 
Dreamweaver 文档 中 ， 查 看 
所 导入 的 Word 文档 中 的 数 
据 ， 如 图 8-44 所 示 。 
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和 图 8-43_。【 导 入 Word 文档 】 对 话 框 























4. 导出 数据 


在 Dreamweaver 文档 
中 ， 除 了 可 以 导入 外 部 数据 之 外 ， 还 可 以 将 Dreamweaver 文档 中 的 表格 导出 为 普通 的 表 
格式 数据 。 











首先 ， 选 择 表格 或 选择 任意 一 个 单元 
格 , 执行 【文件 ] 1【 导 出 ] 表格】 命令 。 
然后 ， 在 弹出 的 【导出 表格 】 对 话 框 中 设 ， 
置 【 定 界 符 】 选 项 ， 用 于 指定 分 隔 符 样式 ， 
同时 设置 【换行 符 】 选 项 ， 用 于 指定 打开 | 
文件 所 使 用 的 操作 系统 版 本 ， 并 单 击 【 导 | 
出 】 按 钮 ， 如 图 8.45 所 示 。 

最 后 ， 在 弹出 的 【表格 导出 为 】 对 话 人 图 8-44 。 查 看 导入 效果 


框 中 ， 设 置 保存 位 置 和 名 称 ， 单 击 【保存 】 按 钮 即 可 ， 如 图 8-46 所 示 。 
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和 图 8-45 【导出 表格 】 对 话 杠 和 图 8-46 【表格 导出 为 】 对 话 杠 


Fj 习 : 制作 健康 网 页 内 容 


块 状 标签 不 仅 可 以 为 网 页 布局 ， 还 可 以 整理 网 页 的 各 种 内 容 ， 使 网 页 的 内 容 更 加 有 
条 理 。 除 了 块 状 标签 外 ， 用 户 还 可 以 使 用 内 联 标签 ， 创 建 网 页 的 具体 内 容 。 在 本 练习 中 
将 通过 制作 健康 网 页 内 容 , 来 详细 介绍 块 状 标签 和 内 联 标签 的 使 用 方法 , 如 图 8-47 所 示 。 
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和 | 图 8-47_, 健 康 网 页 内 容 
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操作 步骤 : 
打开 素材 文件 ,在 ID 为 “content” 的 Div 在 “rows” 层 中 插入 类 名 称 为 “bjPic” 和 



































层 中 执行 【插入 】IDiv 命令 , 插入 类 名 称 为 “bjText” 的 Div 层 ， 设 置 其 CSS 规则 ， 如 
“Ileftmain” 的 Div 层 ， 并 设置 其 CSS 规则 ， 图 8-51 所 示 。 
如 图 8-48 Wi 
对 此 处 晶 示 class “bjPic" 的 内 容 站 外 未 cass “Text 的 内 容 
E CO 
上 : 
l 
了 
[了 图 8-48 .插入 “leftmsin” 层 和 图 8-51 插入 “bjPic” 和 “bjText” 层 


在 “bjPic” 层 中 插入 类 名 称 为 “pic” 和 
“bjpicText” 的 Div 层 , 并 设置 其 CSS 规则 ， 
如 图 人 


在 “leftmain” 层 中 插入 类 名 称 为 “title” 的 
Div 层 , 设置 其 CSS 规则 , 并 输入 标题 名 称 ， 
8-49 NE 














人 图 8-49 ,制作 “tile” 层 图 8-52 .插入 “pic” 和 “bjpicText” 层 
在 “leftmain” 层 中 插入 类 名 称 为 “rows” 加 将 光标 置 于 类 名 称 为 “pic” 的 Div 层 中 ， 
的 Div 层 , 设置 其 CSS 规则 ， 如 图 8-50 执行 [插入 咱 图 像 ] 命 令 , 插入 “bjys.jpg” 


所 示 。 图 像 ， 如 图 8-53 所 示 。 


























«ed 
0 搬入 .wowis” 层 人 图 8-53 .添加 “pie” 层 内 容 








震 % 潍 


网 
页 
E 司 
格 
和 
吕 
村 





六 
人 
oo 
D 
© 
SD 
[=] 
版 





将 光标 置 于 名 称 为 “bjpicText” 的 Div 层 中 ， 
输入 文本 ， 单 击 【 项 目 列表 】 按钮 ,创建 列 
表 并 设置 CSS 规则 ， 如 图 8-54 所 示 。 























设置 <a> 标 签 的 CSS 规则 ， 选 择 文本 ， 在 
【 属性 】 中 设置 【 链接 】 为 “javascript: 
void(nul);”， 如 图 8-57 所 示 。 


本 Let ~] 


EEEEEHZI 








和 图 8-54 .添加 “bjpicText” 层 内 容 

图 将 光标 置 于 “bjText” 层 中 ， 插 入 类 名 称 为 
“bigTitle” 和 “Listmain” 的 Div 层 ， 设 置 
其 CSS 规则 ， 如 图 8-55 所 示 。 











和 图 8-55 ,插入 Div 层 


加 在 “bigTitle” 层 中 输入 标题 文本 ,在 
“Listmain” 层 中 输入 项 目 列表 内 容 ， 如 图 
8-56 所 示 。 








有 养生 之 这 

“心理 保健 
上 * 女性 保健 
习 * 老人 保健 


“* 者 前 先 灶 水 鱼肉 说 美 无 胆 味 




















图 8-56 添加 “bjText” 层 内 容 





和 图 8-57 设置 链接 
设置 a:hover 的 CSS 规则 ， 使 用 上 述 方式 


分 别 创建 【 减肥 频道 ]【 饮食 健康 ] 和 【 老 
年 健康 】 版 块 ， 如 图 8-58 所 示 。 


“ 夏季 起 雇 啤酒 有 五 个 坏处 
“* 女人 美白 吃 什么 水 果 最 有 效 
* 爱 喝 酒 的 男人 更 应 喝 牛 奶 


* 八方 美食 ， 食 色 男女 
* 美食 DIY “饮食 误区 
饮食 调理 “ 





和 图 8-58_, 制 作 其 他 版 块 


将 光标 置 于 文档 底部 ， 插 入 ID 为 “footer” 
的 Div 层 , 设置 CSS 样式 ， 输 入 文本 并 设 
置 文本 格式 ， 如 图 8-59 所 示 。 





白 旋 什么 水 果 最 有 效 
的 男人 更 应 喝 牛 奶 
恬 和 校花 蛋 很 有 营养 价值 
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和 | 图 8-59 ,制作 版 尾 内 容 


制作 宠物 之 家 网 页 





在 网 页 制作 过 程 中 ， 需 要 在 固定 并 有 限 的 区 域 中 显示 较 多 的 信息 。 此 时 ， 可 以 使 用 
浮动 框架 页 面 来 实现 ， 浮 动 框架 既 可 以 在 网 页 中 插入 ， 也 可 以 在 表格 中 插入 。 在 本 练习 








中 ， 将 通过 制作 宠物 之 家 网 页 ， 来 详细 介绍 浮动 框架 的 使 用 方法 ， 如 图 8-60 所 示 。 





《了 图 8-60 .宠物 之 家 网 页 
操作 步 又: 


新 建 空 白文 档 ， 保 存 文 档 后 单 击 【 属性 】 面 
板 中 的 【 页 面 属 性 】 按钮， 设置 背景 颜色 ， 
如 图 8-61 所 示 。 

















| 里 默 认 字 体 | ~ ~ 
CS) ~ 加 
A 
冯 及 新 色 (8) 
背景 图 像 (I) [| 

重复 (E) ~ 


左边 距 负 | Ee) Ea 
上 边 距 (人 P) Pa 下 边 距 o) Fa 
EZ i [0 
和 图 8-61 设置 背景 颜色 


执行 【插入 】1 【表格 】 命令, 插入 一 个 1 
行 1 列 【 宽 】 为 “800 像素 ”的 表格 ， 如 





































































































































图 8-62 所 示 。 
























































和 图 8-62 ,插入 1 行 1 列 的 表格 


选择 表格 ,在 【 属性 ] 面板 中 ， 将 Align 设 
置 为 【 居中 对 齐 ]， 如 图 8-63 所 示 。 
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和 _ 图 8-63 设置 对 齐 方 式 





将 光标 定位 在 单元 格 中 , 在 [ 属性 ] 面 板 中 ， 
将 【背景 颜色 】 设 置 为 “#666666”， 如 图 
8-64 所 示 。 


了 图 8-66 ,设置 对 齐 方 式 





合并 第 1 行 的 单元 格 ,将 光标 置 于 第 1 行 中 ， 
执行 【插入 儿 图 像 ] 命令 , 插入 “title.jpg” 
图 像 ， 如 图 8-67 所 示 。 


















































类 无 温 摇 壮 闪 标题) 
上 {CAea 目标 (6) 


敲 (不 摘 行 (0) 口 ee 
高 0 [标量 所 上 口 




















TO 











在 了 图 8-64 设置 表格 背景 颜色 





光标 放置 在 单元 格 中 , 执行 【插入 ][ 表格 】 
命令 ， 插 入 一 个 4 行 2 列 【 宽 】 为 “712 
像素 ”,【 单元 格 间距 】 为 “5” 的 表格 ， 如 
图 8-65 所 示 。 





















































和 图 8-65_。 插 入 嵌 套 表格 


加 选择 表格 ， 在 【 属性 ] 面板 中 ,将 Align 设 
置 为 【居中 对 齐 】 如 图 8-66 所 示 。 





和 图 8-67 ,插入 图 像 





图 合并 第 2 行 的 单元 格 ,将 光标 置 于 第 2 行 中 ， 
执行 【插入 】|【 表格】 命令 , 插入 一 个 1 
行 6 列 的 表格 ， 如 图 8-68 所 示 。 
























































【了 图 8-68 插入 嵌 套 表格 





图 选择 所 有 单元 格 , 将 [【 宽 ] 设 为 “100”, 将 
【高 ] 设 为 “35”, 将 【水 平 】 设置 为 【 居中 
对 齐 】 将 【背景 颜色 ] 设置 为 “#7d9a17”， 
如 图 8-69 所 示 。 
























































和 图 8-69 设置 表格 属性 


在 表格 中 分 别 输入 相应 文本 ,选择 【 关于 我 
们 】 文 本， 单 击 【 链接 】 文本 框 右 侧 的 【 浏 
览 文件 ] 按钮 , 选择 “welcome.html” 页 面 ， 
如 图 8-70 所 示 。 





<a href="#" 


‘a href="welcome.html" target=") 
td width="16&' ali 




















8-70 链接 页 面 1 


选择 【 联系 我 们 】 文本 ， 单 击 【 链接 】 文 
本 框 右 侧 的 【浏览 文件 】 按 钮 ， 选 
择 “contentus.html” 页 面 ， 如 图 8-71 
所 示 。 


td Width="160" align="center" bgcolor="#7d9a17">< 
宠物 爱好 </a></td 

td width="160" align="center" bgcolor="#7d9a17"><al 
宠物 种 类 </a></td 

td width="169" align="center" bgcolor="#7d9a17"><al 
宠物 饲养 </a></td> 

td width="169" ali 
target="pe: 











bgcolor="#7d9a17"><al 














和 图 8-71 链接 页 面 2 

选择 【 首页 】 文本 ， 在 【 链接 】 文 本 框 中 输 
入 “ 扩 " ， 创 建 空 链接 ， 如 图 8-72 所 示 。 使 
用 同样 方法 ， 创 建 其 他 空 链 接 。 





人 7 图 8-72 创建 空 链接 


将 光标 置 于 第 3 行 第 1 列 中 ,执行 【插入 】 
IHTML 1IFRAME 命令 ， 进 入 【 拆 分 】 模式 ， 
如 图 8-73 所 示 。 











和 图 8-73 插入 浮动 框架 


切换 到 【 代码 】 视 图 中 ， 为 iframe 元 素 添 
加 src、width、height、frameborder 等 属 
性 ， 设 置 浮动 框 ， 如 图 8-74 所 示 。 





<td>&nbspj</td 


tr 


td>a&nbspji</td 


+risauivree- /+ 











和 图 8-74 ,设置 浮动 框架 属性 


将 光标 置 于 第 3 行 第 2 列 中 , 将 【垂直 】 设 
置 为 【 顶端 】 将 【 宽 】 设 置 为 “420”, 将 
【高 ] 设 置 为 “204”, 并 插入 “beijixiong.jpg” 
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图 像 ， 如 图 8-75 所 示 。 








和 图 8-75 插入 图 像 


合并 第 4 行 中 的 单元 格 , 将 光标 置 于 单元 格 
执行 【插入 】 |[ 表格 】 命令, 插入 一 个 
3 行 3 列 的 表格 ， 如 图 8-76 所 示 。 





8-76 ,插入 3 行 3 列 的 表格 


分 别 合并 第 1 和 3 行 中 的 单元 格 , 并 将 第 1 
和 2 行 单元 格 的 【 背景 颜色 】 设 置 为 
“#b0ae75”， 如 图 8-77 所 示 。 

















和 | 图 8-77 设置 单元 格 属性 


在 第 1 行 中 插入 “gallery.jpg” 图 像 ， 选 择 
第 2 行 第 1 列 ， 将 【 宽 】 设 置 为 “84”， 并 
插入 “baijpg” 图 像 ， 如 图 8-78 所 示 。 


ha | 格式 () 无 一 类 [无 
二 二 元 OO 设置 | 
下 单元 格 。 水 平 (2) | 默认 | 帘 国 
| 总 重 直 (T)| 黑 认 高 00 


84] 不 换行 














上 
上; 
上 四 插入 


一 
用 了 图 8-78_ 插入 图 像 











使 用 同样 方法 , 设置 第 2 行 第 2 列 单元 格 的 宽 
度 ， 并 插入 图 像 。 然 后 ,在 第 2 行 第 3 列 中 输 
入 文本 ， 并 设置 文本 属性 ， 如 图 8-79 Js 











LJ 图 8-79 设置 图 像 和 文本 


加 选择 第 3 行 , 将 [ 水平] 设置 为 [ 居中 对 齐 】， 
将 【高 】 设置 为 “50"， 并 输入 版 尾 文本 ， 
如 图 8-80 所 示 。 

















制作 版 尾 内 容 


8-80 


8.7 ”思考 与 练习 





一 、 填 空 题 


1. <div> 标 签 是 HTML 众多 标签 中 的 一 个 ， 
它 相当 于 一 个 容器 或 一 个 ” ,用户 可 以 将 网 页 
中 的 文字 、 图 片 等 元 素 放 到 这 个 容器 中 。 

2. 当 表格 宽度 的 单位 设置 为 时 , 表 
格 宽度 是 固定 的 ， 不 会 随 着 浏览 器 窗口 的 改变 而 
变化 。 

3. 在 表格 中 输入 文本 时 ， 当 表格 的 单位 为 
百分比 〈%) 时 ， 其 单元 格 的 宽度 将 随 着 内 容 不 
断 增 多 ， 而 向 “延伸 。 

4. 在 调整 表格 的 列 宽 时 ， 可 通过 按 住 
_ 键 拖 动 边框 的 方法 , 在 保留 其 他 单元 格 列 
宽 的 情况 下 ， 调 整 该 单元 格 的 列 宽 。 

5. 用 户 也 可 以 使 用 组 合 键 和 

组 合 键 ， 来 复制 与 粘贴 单元 格 及 内 容 。 

6. 导入 Word 文档 时 ， 其 Word 文档 中 的 内 
容 必 须 以 的 形式 进行 显示 ， 否 则 所 导入 
的 Word 文档 内 容 将 会 以 普通 文本 的 格式 进行 
显示 。 


二 、 选 择 题 


1. 在 Table 对 话 框 中 , 【标题 】 选 项 包括 无 、 
左 、 项 部 和 
A. 底部 B. 两 者 
.上 D. 下 
2. 将 鼠标 移 至 表格 中 行 的 最 左 端 或 列 的 最 
上 端 ， 当 光标 变 成 “向 右 ” 或 ” ”箭头 时 ， 


单 击 鼠标 即 可 选择 整 行 或 整 列 。 
人 A. 向 左 B. 向 上 
C. 向 下 D. 双向 


3. 选择 整个 表格 之 后 ， 用 户 发 现在 表格 的 





右边 框 、 下 边框 和 右 下 角 会 出 现 个 控制 点 。 
A. 1 B. 2 
G.3 D. 4 


4. 合并 单元 格 可 以 将 同行 或 同 列 中 的 多 个 
连续 单元 格 合并 为 一 个 单元 格 ， 但 所 选 连续 的 单 
元 格 必须 可 以 组 成 一 个 ” 形状， 否则 将 无 法 
合并 单元 格 。 


A. 矩形 B. 长 方形 


C. 椭圆 形 D. 圆 形 
5. Dreamweaver 除了 为 用 户 提供 插入 表格 、 
编辑 和 设置 表格 属性 等 基础 表格 功能 之 外 ， 还 
为 用 户 提供 了 和 导入 /导出 表格 数据 等 数 
据 处 理 功能 ， 以 方便 用 户 使 用 外 部 数据 来 设计 
网 页 。 
A. 计算 表格 数据 ”B. 降序 表格 数据 
C. 升序 表格 数据 ”D. 排序 表格 数据 


三 、 问 答题 


1. 如 何 插入 幅 套 Div 层 ? 
2. CSS 控制 页 面 元 素 的 具体 属性 有 哪 


3。 简 述 创建 嵌 套 表格 的 操作 方法 。 
4. 如何 合 并 和 拆 分 单元 格 ? 
5. 如 何 排序 数据 ? 


四 、 上 机 练习 


1. 使 用 XHTML 制作 特定 表格 

在 本 练习 中 , 将 使 用 XHTML 代码 制作 一 个 
3 行 X4 列 、 宽 度 为 200 像素 、 边 框 粗细 为 1、 单 
元 格 边 距 和 间距 为 2， 以 及 表格 标题 位 于 项 部 的 
一 个 特定 表格 ,如 图 8-81 所 示 。 首 先 创建 一 个 空 
白文 档 ， 并 切换 到 【代码 】 视 图 中 。 将 光标 放置 
在 <body></body> 标 签 之 间 ， 输 入 定义 表格 基本 
属性 的 标签 。 然 后 , 输入 <caption></caption> 标 签 ， 
并 在 标签 之 间 输入 表格 标题 “特定 表格 ”文本 。 


最 后 输入 <tbody></tbody>、<tr></tr>、<td></td>、 
<th></th> 标 签 ， 来 定义 表格 和 表格 列 组 标题 。 


re 
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图 8-81 ,特定 表格 





2. 排序 数据 执行 【命令 】|【 排 序 表格 】 命 令 ， 在 弹出 的 【 排 

在 本 练习 中 ， 首 先 新 建 空白 文档 ， 执 行 【 插 。 。 序 表格 】 对 话 框 中 , 将 【排序 按 】 设 置 为 【 列 11】， 
入 】 民 表格】 命令 插入 一 个 12 行 11 列 的 表格 。 将 【顺序 】 设 置 为 【 按 数字 排序 】 单 击 【 确 定 】 
然后 ， 在 表格 中 输入 数据 ， 并 在 【属性 】 面 板 中 按钮 后 ， 表 格 中 的 数据 即 按 总 成 绩 的 升序 进行 排 
设置 单元 格 区 域 的 背景 颜色 。 最 后 ， 选 择 表 格 ， 列 ， 如 图 8-82 所 示 。 





编号 。 姓名 企业 规章 财务 电脑 商务 质量 平均 成 总 
概论 制度 -二 操作 礼仪 管理 一 

018760 。 王 小 童 80 

018759 张 康 89 

018766 。 东方 祥 。 80 

018768 赵 

018765 苏 户 

018763 

018761 ” 李 贺 图 80 

018762 郑 

018764 王 

018767 李 

018758 刘 
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9.1 应 用 模板 
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文档 ， 而 创建 的 文档 则 会 继承 模板 的 页 面 布 局 。 
1. 模板 概述 


使 用 模板 可 以 一 次 更 新 多 个 页 面 。 从 模板 创建 的 文档 与 该 模板 保持 连接 状态 〈 除 
非 用 户 以 后 分 离 该 文档 )。 用 户 可 以 修改 模板 并 立即 更 新 基于 该 模板 的 所 有 文档 中 的 
设计 。 

而 设计 模板 时 ， 可 以 指定 在 基于 模板 的 文档 中 ， 确 定 可 编辑 的 区 域 。 





将 文档 另存 为 模板 以 后 ， 文 档 的 大 部 分 区 域 就 被 锁定 。 模 板 创作 者 在 模板 中 插入 可 
编辑 区 域 或 可 编辑 参数 ， 从 而 指定 在 基于 模板 的 文档 中 哪些 区 域 可 以 编辑 。 

而 在 建 模板 中 ， 可 编辑 区 域 和 锁定 区 域 都 可 以 更 改 。 但 基于 模板 的 文档 中 ， 用 户 只 
能 在 可 编辑 区 域 中 进行 更 改 ， 不 能 修改 锁定 区 域 。 

如 果 模 板 文 件 是 通过 现 有 页 面 另存 为 模板 来 创建 的 ， 则 新 模板 将 保存 在 Templates 
文件 夹 中 ， 并 且 模 板 文 件 中 的 所 有 链接 都 将 更 新 以 保证 相应 的 文档 相对 路 径 是 正确 的 。 

如 果 用 户 基 于 该 模板 创建 文档 ， 并 保存 该 文档 ， 则 所 有 文档 相对 链接 将 再 次 更 新 ， 
从 而 依然 指向 正确 的 文件 。 

向 模板 文件 中 添加 相对 链接 时 ， 如 果 在 【属性 】 面 板 中 的 链接 文本 框 中 输入 路 径 ， 
则 输入 的 路 径 名 很 容易 出 错 。 

模板 文件 中 正确 的 路 径 是 从 Templates 文件 夹 到 链接 文档 的 路 径 ， 而 不 是 从 基于 模 
板 的 文档 的 文件 夹 到 链接 文档 的 路 径 。 

在 模板 中 创建 链接 时 ， 可 以 使 用 【属性 】 面 板 中 【指向 文件 】 图 标 ， 以 确保 存在 正 
确 的 链接 路 径 。 


2. 直接 创建 模板 


在 Dreamweaver 中 ， 用 户 既 可 以 直接 将 现 有 网 页 另存 为 模板 ， 又 可 以 创建 一 个 空白 
模板 。 无 论 是 另存 为 模板 还 是 创建 空白 模板 ， 其 操作 方法 大 体 相同 。 

打开 现 有 的 页 面 ,执行 [ 文 FT 
件 】| 【另存 为 模板 】 命 令 ,， 或 
在 【插入 】 面 板 中 的 【模板 】 
选项 卡 中 ， 单 击 【 创 建 模板 】 
按钮 ， 如 图 9-1 所 示 。 | 

然后 ， 在 弹出 的 【另存 模 | 
板 】 对 话 框 中 , 设置 相应 选项 ， 
单 击 【 保 存 】 按 钮 ， 如 图 9-2 
所 示 。 











和 图 9-1 ,创建 模板 


其 中 ， 在 【另存 模板 】 对 话 框 中 ， 主 要 包 








括 下 列 4 种 选项 : a | 守 
口 站 点 ”用 来 选择 所 保存 模板 的 站 点 。 [A 
口 现存 的 模板 ”在 该 列表 中 可 以 显示 站 








点 根 目录 下 的 模板 文件 ， 如 果 没 有 创 
建 模板 文件 则 会 显示 “( 没有 模板 ) 




















文本 ， 
口 描述 ”用 于 输入 描述 模板 文件 的 说 明 人 了 图 9-2 。[ 另 存 模板 】 对话 杠 
性 文本 。 


口 另存 为 ”用 于 设置 所 保存 的 模板 文件 名 。 

上 时， 系统 会 自动 弹出 提示 框 ， 提 示 用 户 是 否 更 新 页 
面 中 的 链接 。 单 击 【 和 否 】 按 钮 ， 完 成 另存 为 模板 的 操作 ， 
该 模板 文件 将 被 保存 在 站 点 中 的 Templates 文件 夹 中 , 如 图 
9-3 所 示 。 


3. 创建 说 套 模板 


嵌 套 模板 是 指 其 设计 和 可 编辑 区 
域 都 基于 另 一 个 模板 的 模板 ， 它 是 基 
本 模板 的 一 种 变 体 ， 主 要 用 于 控制 共 
享 站 点 页 面 中 的 设计 元 素 。 用 户 可 通 
过 嵌 套 多 个 模板 的 方法 ， 来 定义 更 加 
精确 的 网 页 布局 。 

如 想 创 建 嵌 套 模板 ， 首 先 需要 创建 
一 个 基础 模板 。 然 后 ， 执 行 【 文 件 】| 
【新 建 】 命 令 ， 在 弹出 的 【新 建文 档 】 
对 话 框 中 ， 选 择 【 网 站 模板 】 选 项 卡 
中 的 模板 文件 ， 单 击 【 创 建 】 按 钮 ， 图 9-4 创建 模板 文档 
如 图 9-4 所 示 。 RN 天 

此 时 ， 在 打开 的 模板 文档 
中 , 单 击 【 插 入 】 面 板 中 的 【 创 
建 嵌 套 模 板 】 按 钮 ， 准 备 创建 
媒 套 模板 ， 如 图 9-5 所 示 。 

最 后 ， 在 弹出 的 【另存 模 
板 】 对 话 杠 中， 设置 保存 名 称 
和 站 点 ， 单 击 【 保 存 】 按 钮 即 鼎 < 
可 ， 如 图 9-6 所 示 。 和 图 9-5 。 创 建 谋 套 模板 
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站 点 : | 一枝 区 于 
现存 的 模板 : [1212 


index 








在 Dreamweaver 中 ， 创 建 模板 文件 之 后 ， 
可 在 模板 中 通过 创建 一 些 可 以 编辑 的 区 域 ,来 | (DS 和 ja 
编辑 模板 。 其 中 , 编辑 模板 主要 包括 定义 可 编 


每 区域 、 定 义 可 选区 域 、 定 义 重复 区 域 、 定 义 《了 图 9_6 【另存 模板 】 对 话 杠 
重复 表格 等 内 容 。 


1. 定义 可 编辑 区 域 


可 编辑 区 域 是 在 模板 中 未 锁定 
的 区 域 ， 也 是 模板 中 唯一 可 以 允许 
j 户 修改 、 添 加 内 容 的 区 域 。 在 模 
板 文件 中 ， 选 中 需要 定义 的 可 编辑 
葡 域 的 内 容 ， 单 击 【 插 入 】 面 板 中 
的 【可 编辑 区 域 】 按 钮 ， 如 图 9-7 
所 示 。 

然后 ， 在 弹出 的 【新 建 可 编辑 
区 域 】 对 话 框 中 ， 输 入 定义 的 区 域 
名 称 ， 单 击 【 确 定 】 按 钮 ， 即 可 将 
可 编辑 区 域 插入 到 页 面 中 , 如 图 9-8 
所 示 。 




























































提 ” 示 





在 Dreamweaver 中 ， 可 以 选择 层 、 活 动 
框架 、 文 本 段落 、 图 像 、 其 他 类 型 模板 
区 域 和 表格 等 ， 将 其 设置 为 可 编辑 区 域 
中 的 内 容 。 但 是 ， 可 编辑 区 域 不 能 设置 
为 表格 的 单元 格 。 


定义 可 编辑 区 域 之 后 ,用 
户 可 通过 直接 单 击 可 编辑 区 
域 上 的 标签 ,来 选择 可 编辑 区 
域 。 另 外 , 用 户 还 可 执行 【 修 
改 】|【 模 板 】 命 令 ， 在 其 级 
联 菜单 中 通过 选择 可 编辑 
域名 称 ， 来 选择 可 编辑 区 域 。 











区 
































而 当 用 户 选 择 可 编辑 区 域 后 ， 
可 在 【属性 】 面板 中 修改 可 编 
辑 区 域 的 名 称 ， 如 图 9-9 [了 图 9-9 ,编辑 区 域名 称 


所 示 。 


选择 可 编辑 区 域 ， 接 下 Delete 键 ， 即 可 删除 已 定义 的 可 编辑 区 域 。 





2.， 定义 可 选区 域 








可 选区 域 是 Dreamweaver 中 另 一 
种 特殊 的 区 域 , 用 户 可 以 对 其 进行 隐藏 
或 显示 。 在 模板 文件 中 , 选中 需要 定义 
的 可 选区 域 的 内 容 ， 单 击 【 插 入 】 面 
板 中 的 【可 选区 域 】 按 钮 ， 如 图 9-10 
所 示 。 
在 弹出 的 【新 建 可 选区 域 】 对 话 框 
中 的 【高 级 】 选 项 卡 中 ， 设 置 相 应 的 选 CT 图 9_10 选择 区 域 
项 ， 如 图 9-11 所 示 。 
然后 ， 激 活 【基本 】 选 项 卡 ， 设 置 
可 选区 域 的 名 称 和 显示 方式 , 单 击 【 确 
定 】 按 钮 即 可 ， 如 图 9-12 所 示 。 
其 中 , 在 【新 建 可 选区 域 】 对 话 框 
中 ， 主 要 包括 下 列 选项 : 
口 名 称 用 于 设置 可 选区 域 的 
名 称 。 
口 默认 显示 “启用 该 复 选 框 ， 将 
在 基于 模板 的 页 面 中 显示 可 选 全 了 图 9-1 。【 高 级 】 选项 卡 
区 域 。 



















































选择 现 有 参数 或 输入 一 个 表达 式 ， 以 确定 该 区 域 是 否 可 见 * 
团 “ 使 用 参数 | 无 ~| 
〇 输入 表达 式 - 


ptionalRegionl 


地 





例 0:LANGUAGE==English 
































口 使 用 参数 ”选中 该 选项 , 可 在 | Fax | | | | 
其 后 的 列表 中 选择 需 将 所 选 内 名 称 : [OptionalRegion1 Ci | 
容 链 接 到 的 现 有 参数 。 只 显示 [E70| 
口 输入 表达 式 ” 选 中 该 选项 ， 可 








在 文本 框 中 通过 编写 模板 表达 
式 ， 来 控制 可 选区 域 的 显示 
情况 。 


3. 定义 可 编辑 的 可 选区 域 


可 编辑 的 可 选区 域 是 在 可 选区 域 上 
中 嵌 套 可 编辑 区 域 。 这样， 用 户 除 了 选 | 
择 是 否 在 模板 中 显示 外 , 还 可 以 在 模板 
生成 的 网 页 中 编辑 该 区 域 的 内 容 。 Ee 
在 模板 文件 中 , 选中 具体 内 容 , 单 遇 
击 【 插 入 】 面 板 中 的 【可 编辑 的 可 选区 
域 】 按 钮 ， 如 图 9-13 所 示 。 

然后 ， 在 弹出 的 【新 建 可 选区 域 】 在 图 9-13_。 选 择 可 编辑 可 选区 域 
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对 话 框 中 的 【高 级 】 选 项 卡 中 ， 设 置 各 项 选项 ， 


4. 定义 重复 区 域 


重复 区 域 是 可 以 根据 需要 在 基于 模板 
的 网 页 文档 中 , 复制 任意 次 数 的 模板 区 域 。 
重复 区 域 通常 存在 于 表格 以 及 表格 的 单元 
格 内 容 等 ， 以 显示 大 量 数据 。 

在 网 页 模板 中 创建 重复 区 域 的 方法 和 
其 他 区 域 类 似 ， 选 择 需要 创建 重复 区 域 的 
网 页 对 象 或 模板 区 域 ， 单 击 【插入 】 面 板 
中 的 【重复 区 域 】 按 钮 ， 如 图 9-15 所 示 。 

然后 ， 在 弹出 的 【新 建 重复 区 域 】 对 
话 框 中 ， 设 置 重复 区 域 的 名 称 ， 单 击 【 确 
定 ] 按 钮 即 可 创建 一 个 重复 区 域 , 如 图 9-16 
所 示 。 


5. 定义 重复 表格 


重复 表格 是 重复 区 域 的 扩展 ， 是 创建 
包含 可 编辑 区 域 的 重复 区 域 表 格 。 

选择 需要 创建 重复 区 域 的 网 页 对 象 或 
模板 区 域 ， 
对 话 框 中 ， 











设置 相应 的 选项 ， 








并 单 击 【 确 定 】 按 钮 ， 如 图 9-14 所 示 。 








雪 本 | 高 名 | 


3 
选择 现 有 参数 或 输入 一 个 表达 式 ， 以 确定 该 区 域 是 否 可 见 。 | 取消 
@ “使 用 条 数 - 夺 > ~ 
: [ 亲 
口 广 入 表达 式 
tionalRegionl 





全 0:LANGUAGE==Englisn 











【插入 】 面 板 中 的 【重复 表格 】 按 钮 。 然 后 ， 





a 【高 级 】 选 项 卡 











/J 图 9-15 .选择 重复 区 域 
在 弹出 的 【插入 重复 表格 】 


单 击 【确定 】 按 钮 即 可 ， 如 图 9-17 所 示 。 









































行 数 :上 ] 单元 格 四 : 5 [| 
列 :[3 。 | 单元 格 间距: 0 [ 取消 
宽度 :[75 | 化“ 二 [十 盈 | 
边框 :BB 
重复 未 格 行 
起 始 行 : |1 结束 行 : |1 
区 域名 称 : RepeatReionl 

















和 图 9-16 .显示 重复 区 域 
在 【插入 重复 表格 】 对 话 框 中 ， 主 要 包括 表 9-1 中 的 一 些 选项 。 
2 表 9-1 













定义 重复 表格 的 行 数 


【插入 重复 表格 】 对 话 框 选项 及 作用 





和 | 图 9-17 ,插入 重复 表格 








列 





定义 重复 表格 的 列 数 








单元 格 边 距 
单元 格 间距 









定义 重复 表格 中 各 单元 格 之 间 的 距离 
定义 各 单元 格 内 容 之 间 的 距离 






续 表 





区 域 开 始 行 
复 表 格 的 重复 区 域 结 束 的 行 数 
表格 的 名 称 


在 重复 表格 中 ， 用 户 可 以 嵌 套 多 个 可 编辑 区 域 ， 以 供用 户 输入 内 容 。 
6. 设置 可 编辑 标签 属性 


设置 可 编辑 标签 属性 ， 可 以 帮助 用 户 在 模板 网 页 中 修改 指定 标记 的 属性 。 
在 网 页 中 选择 一 个 对 象 ， 执 行 【修改 】| 【模板 】|【 令 属性 可 编辑 】 命令， 在 弹出 的 
【可 编辑 标签 属性 】 对 话 框 中 ， 单 击 【 添 加 】 按 钮 ， 如 图 9-18 所 示 。 

其 中 ， 在 【可 编辑 标签 属性 】 对 话 框 中 ， 主 要 包括 下 列 5 种 选项 : 

口 属性 用 于 选择 页 面 元 素 已 设置 的 
属性 ,所 选中 的 属性 即 可 变 为 可 编辑 
的 属性 。 用户 可 通过 单 击 【 添 加 】 按 | 过 此 MG 标的 惠 人 上 是 可 和 
钮 ， 来 添加 属性 。 

口 令 属性 可 编辑 “启用 该 复 选 框 , 可 以 
将 所 选 属性 更 改 为 可 编辑 的 属性 。 

口 标签 用 于 设置 属性 的 唯一 名 称 。 

口 类 型 ”用 于 设置 属性 所 使 用 的 值 的 
类 型 选择 【文本 】 选 项 表示 为 属性 
输入 文本 值 ， 选 择 URL 选项 表示 要 
插入 元 素 的 链接 ， 选择 【颜色 】 选 项 《了 图 9-18 【可 编辑 标 答 属 性 】 对 话 杠 
表示 可 使 用 颜色 选择 器 ， 选 择 【 真 / 
假 】 选 项 表示 可 以 在 页 面 中 选择 true 
或 false 值 ， 选 择 【 数 字 】〗 选 项 表示 
可 以 通过 输入 高 度 、 宽 度 等 数值 以 更 | 请 输入 性 的 和 以 二 入 到 
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新 属性 。 人 区 
口 默认 用 于 设置 所 选 标签 属性 的 加 
认 值 


然后 ， 在 弹出 的 对 话 框 中 的 文本 框 中 ， 
输入 属性 标签 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 
图 9-19 所 示 。 


9.2 ”使 用 库 项 目 


库 项 目 是 Dreamweaver 中 的 一 种 自 定义 网 页 元 素 ， 可 以 在 多 个 页 面 中 重复 使 用 。 在 
Dreamweaver 中 ， 除 了 可 以 创建 和 编辑 库 项 目 之 外 ， 还 可 以 将 库 项 目 插入 到 网 页 中 。 











和 图 9-19 输入 属性 标签 
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库 项 目 是 在 【资源 】 面 板 中 进行 创建 的 ， 但 在 创建 库 项 目 之 外 ， 还 需要 先 来 了 解 一 
下 库 的 基础 知识 。 


1. 了 解 库 


库 是 一 种 特殊 的 Dreamweaver 文件 ， 包 含 了 一 组 可 放置 在 网 页 中 的 单个 资源 或 资源 
副本 ， 而 库 中 的 这 些 资源 则 被 称 为 库 项 目 。 

Dreamweaver 中 可 在 库 中 存储 的 项 目 包括 图 像 表 格 、 声 音 和 使 用 Flash 创建 的 文件 。 
当 编 辑 某 个 库 项 目 时 ， 其 使 用 该 项 目的 页 面 则 会 随 着 库 项 目的 编辑 而 自动 更 新 。 

例如 ， 假 设 正在 为 某 公 司 创建 一 个 大 型 站 点 ， 公 司 希 望 在 站 点 的 每 个 页 面 中 显示 一 
个 广告 语 。 此 时 ， 用 户 可 以 创建 一 个 包含 该 广告 语 的 库 项 目 ， 并 在 每 个 页 面 中 使 用 这 个 
库 项 目 。 当 需要 更 改 广告 语 时 ， 则 可 以 通过 更 改 库 项 目 ， 来 达到 自动 更 新 所 有 广告 语 的 
目的 。 

Dreamweaver 将 库 项 目 存储 在 每 个 站 点 的 本 地 根 文件 夹 下 的 Library 文件 夹 中 , 其 每 
个 站 点 都 有 自己 的 库 。 

用 户 可 以 从 文档 的 <body> 标 签 中 的 任意 元 素 创建 库 项 目 ， 而 这 些 元 素 包括 文本 、 表 
格 、 表 单 、 插 件 、 图 像 等 。 

对 于 链接 项 (如 图 像 )， 库 只 存储 对 该 项 的 引用 。 其 中 ， 原 始 文 件 必须 保留 在 指定 的 
位 置 ， 这 样 才能 使 库 项 目 正 确 地 工作 。 

不 过 ， 在 库 项 目 中 存储 图 像 也 很 有 用 处 。 例 如 ， 可 以 在 库 项 目 中 存储 一 个 完整 的 
<img> 标 签 ， 这 将 允许 用 户 方便 地 在 整个 站 点 中 更 改 图 像 的 alt 属性 文本 ， 甚 至 更 改 src 
属性 。 


Co 


使 用 库 项 目 时 ，Dreamweaver 将 在 网 页 中 插入 该 项 目的 链接 ， 而 不 是 项 目 本 身 。 也 
就 是 说 ，Dreamweaver 向 文档 中 插入 该 项 目的 mm 
HTML 源 代码 副本 ， 并 添加 一 个 包含 对 原始 外 | 另 
部 项 目的 引用 的 HTML 注释 。 其中， 自动 更 新 | 
过 程 就 是 通过 这 个 外 部 引用 来 实现 的 。 


2. 新 建 库 项 目 


首先 ， 执 行 【窗口 】I1【 资 源 】 命 令 ， 打开 
【资源 】 面 板 。 然后， 在 【资源 】 面 板 中 ,选择 
左 侧 的 【 库 】 选 项 卡 。 同 时 ， 单 击 右 侧 f 方 的 
【新 建 库 项 目 】 按 钮 ， 创 建 一 个 库 项 目 ， 如 图 [7 20 面板 
9-20 所 示 。 

















3. 编辑 库 项 目 


新 创建 的 库 项 目 通常 为 空 的 库 项 目 ， 此 时 选择 库 项 目 ， 单 击 列表 下 方 的 【编辑 】 按 
钮 ， 即 可 打开 库 项 目 ， 对 其 进行 编 
辑 操作 ， 如 图 9-21 所 示 。 

















et 


创建 并 编辑 库 项 目 之 后 ， 用 户 便 可 以 
将 库 项 目 插入 到 网 页 中 了 。 同 时 ， 还 可 以 | 国 | 上 
使 用 更 新 功能 ， 来 更 改 整个 网 页 中 的 库 项 图 
目 ， 以 及 使 用 分 离 功 能 ， 来 分 离 库 项 目 。 
1. 插入 库 项 目 


在 【资源 】 面板 中 的 【 库 】 选 项 卡 中 ， 
选择 库 项 目 ， 单 击 【插入 】 按 钮 ， 即 可 - 
交 库 大 目 拍 入 到 当前 由 页 中 ,如 加 922 用 Eg ER 

示 。 -一 
和 _ 图 9-22 插入 库 项 目 
正 丰 














2. 更 新 库 项 目 


对 库 项 目 进行 修改 并 关闭 时 ， 系 统 会 自动 
弹出 【更 新 库 项 目 】 对 话 框 。 此 时 ， 如 需 更 改 | sswxkaygRaay 
应 用 于 整个 站 点 的 库 项 目 ， 则 需要 单 击 【更 新 】| | estwesineee sr 
按钮 ， 如 图 9-23 所 示 。 

然后 ， 在 弹出 的 【更 新 页 面 】 对 话 框 中 
设置 相应 选项 ， 单 击 【 开 始 】 按 钮 即 可 ， 如 图 
9-24 所 示 。 


























9-23 更 新 库 项 目 
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_ Web Fonts script tag 
3. 设置 库 项 目 属性 本 











在 网 页 中 选中 所 插入 的 库 项 目 , 在 
【属性 】 面 板 中 将 显示 库 项 目的 有 关 属 人 oC sate 
性 ， 如 图 9-25 所 示 。 

其 中 , 在 库 项 目的 【属性 ] 面板 中 ， 
主要 包括 下 列 4 种 属性 ; 
口 源 文 件 用 于 显示 与 该 元 素 相 

关 的 库 项 目的 文件 名 和 路 径 。 ”人 了 图 9-25 设置 库 页 目 属性 

口 打开 “ 单 击 该 按钮 ， 可 打开 库 项 目的 源 文件 进行 编辑 。 

口 从 源 文件 中 分 离 ， 单 南 该 按钮 ， 可 以 断 开 库 项 目 和 所 选项 目 之 间 的 链接 . 

口 重新 创建 ” 单 击 该 按钮 ， 可 以 使 用 当前 所 选 定 的 内 容 覆 盖 库 中 的 已 有 项 目 。 

在 将 当前 选中 的 库 项 目 与 源 库 项 目 分 离 之 后 , 其 当前 库 项 目 将 转换 为 普通 网 页 内 容 。 
而 当 源 库 项 目 被 修改 时 ， 已 分 离 的 库 项 目 将 不 会 随 之 更 新 。 

使 用 【重新 创建 】 按 钮 进行 重建 库 项 目 时 ， 如 果 该 库 项 目 不 存 在 ， 单 击 该 按钮 后 ， 
系统 将 会 在 【资源 】 面 板 中 重新 创建 一 个 库 项 目 。 

当 用 户 在 【资源 】 面 板 中 误 删 除了 某 个 库 项 目 ， 并 且 用 该 库 项 目的 页 面 仍然 存在 
时 ， 用 户 可 以 打开 该 页 面 ， 选 中 库 项 目的 副本 ， 单 击 【 重 新 创建 】 按 钮 ， 即 可 重新 创建 
库 项 目 。 








在 标准 化 的 Web 页 设计 中 , 将 XHTML 中 所 有 块 状 标签 和 部 分 可 变 标签 视 为 网 页 内 
容 的 容器 。 使 用 CSS 样式 表 , 用 户 可 以 方便 地 控制 这 些 容器 型 标签 , 为 网 页 的 内 容 布局 ， 
定义 这 些 内 容 的 位 置 、 尺 寸 等 布局 属性 。 


盒 模型 是 一 种 根据 网 页 中 的 块 状 标签 结构 抽象 化 而 得 出 的 一 种 理想 化 模型 。 其 将 所 
有 网 页 中 的 块 状 标签 看 作 是 一 个 矩形 的 盒子 ， 通 过 CSS 样式 表 定 义 盒子 的 高 度 、 宽 度 、 
填充 、 边 框 以 及 补 白 等 属性 ， 实 现 网 页 布局 的 标准 化 。 

盒 模型 理论 是 Web 标准 化 布局 的 基础 。 理 解 盒 模型 ， 有 助 于 将 复杂 的 Web 布局 简 
化 为 一 个 个 简单 的 矩形 块 ， 从 而 提高 布局 的 效率 。 


在 CSS 中 ， 所 有 网 页 都 被 看 作 一 个 矩形 框 ， 或 者 称 为 标签 框 。CSS 盒 模型 正 是 描述 


这 些 标 签 在 网 页 布局 中 所 占 的 空间 和 位 





置 的 基础 ， 如 图 9-26 所 示 。 





在 CSS 盒 模型 中 ， 将 网 页 的 标签 拆 





分 为 4 个 组 成 部 分 ， 即 内 容 区 域 、 填 充 、 
边框 、 补 白 等 。 使 用 CSS 样式 表 ， 用 户 
可 以 方便 地 定义 盒 模型 各 部 分 的 属性 。 


2. 设置 内 容 (content) 属性 


























在 CSS 样式 表 中 ， 人 允许 用 户 定义 内 














容 区 域 的 尺寸 , 包括 内 容 区 域 的 宽度 、 高 
度 、 最 大 宽度 、 最 小 宽度 以 及 最 大 高 度 和 


最 小 高 度 6 种 属性 ， 如 表 9-2 所 示 。 人 了 图 9-26 。 合 模型 结构 


3 表 9-2_ 内容 属性 


可 以 定义 内 容 
可 以 定义 内 容 
可 以 定义 内 容 
可 以 定义 内 容 
可 以 定义 内 容 
可 以 定义 内 容 


表 9-2 中 的 各 属性 的 属性 值 均 为 关键 帧 auto 或 长 度 值 , 而 auto 为 所 有 属性 的 默认 属 


性 值 。 

在 CSS 中 , width 和 height 指 的 是 内 容 区 
域 的 宽度 和 高 度 。 增加 内 边 距 、 边 框 和 外 边 距 
不 会 影响 内 容 区 域 的 尺寸 , 但 是 会 增加 元 素 框 
的 总 尺寸 。 

假设 框 的 每 个 边 上 有 10 个 像素 的 外 边 距 
和 5 个 像素 的 内 边 距 ， 如 果 这 个 元 素 框 达到 
100 个 像素 ， 就 需要 将 内 容 的 宽度 设置 为 70 
像素 ， 如 图 9-27 所 示 。 


#box{ 
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区 域 的 宽度 
区 域 的 高 度 
区 域 的 最 小 宽度 
区 域 的 最 大 宽度 
区 域 的 最 小 高 度 
区 域 的 最 大 高 度 











padding:5px 


width:70px 








width:70px; 
margin:10px; 
padding:5px; 
} 





在 了 图 9-27_ 设置 内 容 区 域 属性 

















例如 ， 定 义 网 页 标签 的 宽度 在 100px 到 200px 之 间 ， 则 可 以 使 用 内 容 区 域 的 最 大 宽 
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度 和 最 小 宽度 属性 ， 其 代码 如 下 所 述 。 


min-width:100px; 
max-width:200px; 


3. 设置 填充 (padding) 属性 


填充 是 网 页 标签 边框 线 内 部 的 一 种 扩展 区 域 。 其 与 内 容 区 域 的 区 别 在 于 ， 用 户 如 为 
网 页 标签 添加 了 各 种 文本 、 图 像 等 内 容 ， 则 这 些 内 容 只 会 在 内 容 区 域 显示 ， 无 法 显示 于 
填充 区 域 。 填 充 可 以 拉 开 网 页 标签 内 容 与 边框 之 间 的 距离 。 在 CSS 样式 表 中 ， 用 户 可 以 
通过 5 种 属性 定义 网 页 标签 的 填充 尺寸 ， 如 表 9-3 所 示 。 

















5 表 9-3 填充 属性 


定义 网 页 标签 4 个 方向 的 填充 尺 二 
定义 网 页 标签 项 部 的 填充 尺寸 
定义 网 页 标签 右 侧 的 填充 尺寸 
定义 网 页 标签 底部 的 填充 尺寸 

padding-left 定义 网 页 标签 左 侧 的 填充 尺寸 





表 9-3 内 各 属性 的 属性 值 均 表示 填充 尺寸 的 长 度 值 ， 其 padding 属性 可 以 使 用 1 一 4 
个 长 度 值 作为 属性 值 。 

当 padding 属性 值 为 一 个 独立 的 长 度 值 时 ， 表 示 所 有 4 个 方向 的 填充 尺寸 均 为 该 长 
度 值 。 例 如 ， 定 义 某 个 标签 4 个 方向 的 填充 尺寸 为 20px， 其 代码 如 下 所 述 。 

padding:20px; 

当 padding 属性 值 为 以 空格 隔 开 的 2 个 长 度 值 时 ， 则 第 1 个 长 度 值 表示 顶部 和 底部 
的 填充 尺寸 ， 第 2 个 长 度 值 表 示 左 侧 和 右 侧 的 填充 尺寸 。 例 如 ， 定 义 某 个 标签 顶部 和 底 
部 填充 尺寸 为 20px， 左 侧 和 右 侧 的 填充 尺寸 为 13px， 其 代码 如 下 所 述 。 

padding:20px 15px; 


当 padding 属性 值 为 以 空格 隔 开 的 3 个 长 度 值 时 ， 其 第 1 个 长 度 值 表示 项 部 的 填充 
尺寸 ,第 2 个 长 度 值 表 示 左 侧 和 右 侧 的 填充 尺寸 ， 第 3 个 长 度 值 表示 底部 的 填充 尺寸 。 
例如 ， 定 义 某 个 标签 顶部 填充 尺寸 为 20px， 左 侧 和 右 侧 的 填充 尺寸 为 13px， 底 部 的 填充 
尺寸 为 0px， 其 代码 如 下 所 述 。 

padding:20px 15px Opx; 

当 padding 属性 值 为 以 空格 隔 开 的 4 个 长 度 值 时 ， 则 分 别 表示 网 页 标签 的 顶部 、 右 
侧 、 底 部 和 左 侧 4 个 方向 的 填充 尺寸 。 例 如 ， 定 义 某 个 网 页 标签 顶部 填充 尺寸 为 30px， 
底部 填充 尺寸 为 20px， 左 侧 填 充 尺寸 为 13px， 右 侧 的 填充 尺寸 为 15px， 其 代码 如 下 
所 述 。 





padding:30px 20px 15px 15px; 


4. 设置 边框 (border) 属性 


边框 属性 主要 用 于 区 分 内 边框 和 外 边 距 ， 其 外 边框 表示 元 素 的 最 外 围 。 在 CSS 样式 
表 中 ， 用 户 可 以 通过 表 9-4 中 的 3 种 属性 来 定义 网 页 标签 的 边框 属性 。 



































22 表 9-4 边框 属性 











定义 边框 的 样式 
定义 边框 的 宽度 
定义 边框 的 颜色 






border-style 
border-width 
border-color 

















边框 属性 中 的 各 属性 组 值 也 需要 使 用 空格 进行 隔 开 ， 分 别 表示 边框 样式 、 边 框 宽度 
和 边框 颜色 。 例 如 ， 定 义 某 个 网 页 标签 边框 的 样式 为 实 线 ， 边 框 宽度 为 10px， 边 框 颜色 
为 红色 时 ， 其 代码 如 下 所 述 。 


border:solid 1l0px #F51216; 

5. 设置 补 白 属性 

补 白 是 网 页 标签 边框 线 外 部 的 一 种 扩展 区 域 。 为 网 页 标签 建立 补 白 ， 可 以 使 网 页 标 
签 与 其 父 标签 和 其 他 同 级 别 标签 拉 开 距 离 ， 从 而 实现 各 种 复杂 的 布局 效果 。 

与 填充 属性 类 似 , CSS 样式 表 提 供 了 5 种 补 白 属性 , 用 于 定义 网 页 标签 的 补 白 尺寸 ， 
如 表 9-5 所 示 。 
3 表 9-5_, 补 白 属性 


定义 网 页 标签 4 个 方向 的 补 白 尺寸 
定义 网 页 标签 顶部 的 补 白 尺寸 


定义 网 页 标签 右 侧 的 补 白 尺寸 
定义 网 页 标签 底部 的 补 白 尺寸 
定义 网 页 标签 左 侧 的 补 白 尺 十 


表 9-5 中 5 种 补 白 属性 的 属性 值 都 与 填充 属性 相同 ， 均 为 补 白 尺 寸 的 长 度 值 。 其 中 ， 
margin 属性 可 以 使 用 1 一 4 个 长 度 值 作 为 属性 值 。 

当 margin 属性 值 为 一 个 独立 长 度 值 时 ， 表 示 4 个 方向 的 补 白 尺 寸 均 为 该 长 度 值 。 例 
如 ， 定 义 某 个 标签 在 4 个 方向 的 填充 尺寸 均 为 20px 时 ， 其 代码 如 下 所 述 。 

margin:20px; 

当 margin 属性 值 为 以 空格 隔 开 的 2 个 长 度 值 时 , 则 第 1 个 长 度 值 表示 顶部 和 底部 的 
补 白 尺 寸 ， 第 2 个 长 度 值 表示 左 侧 和 右 侧 的 补 白 尺寸 。 例 如 ， 定 义 某 个 标签 顶部 和 底部 
补 白 尺寸 为 30px， 左 侧 和 右 侧 的 补 白 尺寸 为 20px 时 ， 其 代码 如 下 所 述 。 

margin:30px 20px; 


当 margin 属性 值 为 以 空格 隔 开 的 3 个 长 度 值 时 ， 则 分 别 表示 顶部 、 左 侧 和 右 侧 、 底 
部 的 补 白 尺 寸 。 例 如 ， 定 义 某 个 标签 顶部 补 白 尺 寸 为 25px， 左 侧 和 右 侧 的 补 白 尺寸 为 
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20px， 底 部 的 补 白 尺寸 为 30px 时 ， 其 代码 如 下 所 述 。 
margin:2spx 20px 30px; 


当 padding 属性 值 为 以 空格 隔 开 的 4 个 长 度 值 时 ， 则 分 别 表示 顶部 、 右 侧 、 底 部 和 
左 侧 的 补 白 尺 寸 。 例 如 ， 定 义 某 个 网 页 标签 的 顶部 补 白 尺寸 为 30px， 右 侧 的 补 白 尺寸 为 
25px， 底 部 的 补 白 尺寸 为 20px， 左 侧 的 补 白 尺寸 为 10px 时 ， 其 代码 如 下 所 述 。 


在 Web 标准 化 布局 中 ， 通 常 包括 3 种 基本 的 布局 方式 ， 即 流动 布局 、 浮 动 布局 和 绝 
对 定位 布局 。 其 中 ， 最 简单 的 布局 方式 就 是 流动 布局 ， 其 特点 是 将 网 页 中 各 种 布局 元 素 
按照 其 在 XHTML 代码 中 的 顺序 ， 以 类 似 水 从 上 到 下 的 流动 一 样 依次 显示 。 

在 流动 布局 的 网 页 中 ， 用 户 无 须 设置 网 页 各 种 布局 元 素 的 补 白 属性 ， 例 如 ， 一 个 典 
型 的 XHTML 网 页 ， 其 body 标签 中 通常 包括 头 部 、 导 航 条 、 主 题 内 容 和 版 尾 4 个 部 分 ， 
使 用 div 标签 建立 这 4 个 部 分 所 在 的 层 后 ， 代 码 如 下 所 示 。 





在 上 面 的 XHTML 网 页 中 ， 用 户 只 需要 定义 body 标签 的 宽度 、 外 补丁 部 分 ， 然 后 
即 可 根据 网 页 的 设计 , 定义 各 种 布局 元 素 的 高 度 , 即 可 实现 各 种 上 下 布局 或 上 中 下 布局 。 
例如 ， 定 义 网 页 的 头 部 高 度 为 100px， 导 航 条 高 度 为 30px， 主 题 部 分 高 度 为 500px， 版 
尾部 分 高 度 为 50px， 代 码 如 下 所 示 。 





流动 布局 方式 的 特点 是 结构 简单 ， 兼 容 性 好 ， 所 有 的 网 页 浏览 器 对 流动 布局 方式 的 
支持 都 是 相同 的 ， 不 需要 用 户 单独 为 某 个 浏览 器 编写 样式 。 然 而 ， 其 无 法 实现 左右 分 栏 
的 样式 ， 因 此 只 能 制作 上 下 布局 或 上 中 下 布局 ， 具 有 一 定 的 应 用 局 限 性 。 





浮动 布局 是 将 所 有 的 网 页 标签 设置 为 块 状 标 签 的 显示 方式 ， 然 后 再 进行 浮动 处 理 。 
最 后 ， 通 过 定义 网 页 标签 的 补 白 属性 来 实现 布局 。 

浮动 布局 可 以 将 各 种 网 页 标签 紧密 地 分 布 在 页 面 中 ， 不 留 空隙 ， 同 时 还 支持 左右 分 
栏 等 样式 ， 是 目前 最 主要 的 布局 手段 。 

在 使 用 浮动 布局 方式 时 ， 用 户 需要 先 将 网 页 标签 设置 为 块 状 显示 。 即 设置 其 display 
属性 的 值 block。 然 后 ， 还 需要 使 用 float 属性 ， 定 义 标签 的 浮动 显示 。 

float 属性 的 作用 是 定义 网 页 布局 标签 在 脱离 网 页 的 流动 布局 结构 后 显示 的 方向 。 其 
在 网 页 设计 中 主要 可 应 用 于 两 个 方面 , 即 实现 文本 环绕 图 像 或 实现 浮动 的 块 状 标签 布局 。 
float 属性 主要 包含 4 个 关键 字 属性 值 ， 如 表 9-6 所 示 。 
225 表 9-6 float 属 性 
属 性 值 


















定义 网 页 标签 以 流动 方式 显示 不 浮动 
定义 网 页 标签 以 左 侧 浮动 的 方式 脱离 流动 布局 
定义 网 页 标签 以 右 侧 浮动 的 方式 脱离 流动 布局 
定义 网 页 标签 继承 其 父 标签 的 浮动 


float 属性 通常 和 display 属性 结合 使 用 ， 先 使 用 display 属性 定义 网 页 布局 标签 以 块 
状 方式 显示 。 再 使 用 float 属性 定义 左右 浮动 ， 其 代码 如 下 所 述 。 


display:block; 
float:left; 





技巧 


| 
以 网 页 设计 中 最 常见 的 div 布 
局 标签 为 例 , 在 默认 状态 下 , 块 状 | 
的 div 布局 标签 在 网 页 中 会 以 上 下 
流动 的 方式 显示 , 如 图 9-28 所 示 。 
将 布局 标签 设置 为 块 显示 方 | 
式 , 并 定义 其 尺寸 后 , 这 些 标签 仍 上 
然 会 以 流动 的 方式 显示 ,如 图 9-29 
所 示 。 和 图 9-28_, 上 下 流动 
为 “网 页 左 侧 栏 标签 ”和 “网 页 右 侧 栏 标签 ”两 个 标签 定义 浮动 属性 后 ， 即 可 使 其 
左右 分 列 布局 ， 如 图 9-30 所 示 。 
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在 图 9-30 的 布局 中 ， 左 侧 栏 
标签 的 CSS 样式 代码 如 下 所 述 : 


display:block; 
float:left; 

width:150px; 

height:60px; 
line-height:60px; 
background-color:#C8C2C2; 


右 侧 栏 标签 的 CSS 样式 代码 


如 下 所 述 。 


display:block; 
float:left; 
width:1350px; 
height:60px; 


















































line-height:60px; 人 了 图 9-30 ,左右 分 列 布局 
background-color: #D56466; 


绝对 定位 布局 为 每 一 个 网 页 标签 进行 
定义 ， 精 确 地 设置 标签 在 页 面 中 的 具体 位 
置 和 层次 次 序 。 绝 对 定位 使 元 素 的 位 置 与 
文档 流 无 关 ， 因 此 不 占据 空间 。 这 一 点 与 
相对 定位 不 同 ， 相 对 定位 实际 上 被 看 成 普 
通 流 定位 模型 的 一 部 分 ， 因 为 元 素 的 位 置 
是 相对 于 它 在 普通 流 中 的 位 置 。 

普通 流 中 其 他 元 素 的 布局 就 像 绝 对 定 
位 的 元 素 不 存在 一 样 ， 如 图 9-31 所 示 。 








和 图 9-31 ,绝对 定位 布局 


#box-relative{ 
position:absolute; 


left:30px; 
top:20px 
上 


绝对 定位 的 元 素 的 位 置 相对 于 最 近 的 已 定位 祖先 元 素 ( 父 元 素 ), 如果 元 素 没 有 已 定 
位 的 祖先 元 素 ( 父 元 素 )， 那 么 它 的 位 置 相对 于 最 初 的 包含 块 。 


对 于 定位 的 3 


要 问题 是 要 记 住 每 种 定位 的 意义 。 其 中 ， 相 对 定位 是 “相对 于 ”元 素 





在 文档 中 的 初始 位 置 ， 而 绝对 定位 是 “相对 于 ”最 近 的 已 定位 祖先 元 素 〈 父 元 素 )， 如 果 
不 存在 已 定位 的 祖先 元 素 〈 父 元 素 )， 那 么 “相对 于 ”最 初 的 包含 块 。 


1. 设置 精确 位 置 


设置 网 页 标签 的 精确 位 置 , 可 使 用 CSS 样式 表 中 的 position 属性 先 定义 标签 的 性 质 。 
position 属性 的 作用 是 定义 网 页 标签 的 定位 方式 ， 其 属性 值 为 表 9-7 中 的 4 种 关键 字 。 


2 表 9-7_ 精确 位 置 


默认 值 ， 无 特殊 定位 ， 遵 循 网 页 布局 标签 原来 的 定位 方式 
绝对 定位 方式 ， 定 义 网 页 标签 按照 left、top、bottom 和 right 这 4 种 属性 定位 


定义 网 页 布局 标签 按照 left、top、bottom 和 right 这 4 种 属性 定位 ， 但 不 允许 发 生 层 
丢 ， 即 忽视 z-index 属性 设置 

修改 的 绝对 定位 方式 ， 其 定位 方式 与 absolute 类 似 ， 但 需要 遵循 一 些 规范 ， 例 如 
position 属性 的 定位 是 相对 于 body 标签 ，fixed 属性 的 定位 则 是 相对 于 html 标签 


将 网 页 布局 标签 的 position 属性 值 设置 为 relative 后 ， 可 以 通过 设置 左 侧 、 顶 部 、 底 
部 和 右 侧 4 种 CSS 属性 ， 定 义 网 页 标签 在 网 页 中 的 偏 移 方式 。 而 这 种 设置 结果 与 通过 
margin 属性 定义 网 页 布局 标签 的 补 白 类 似 ， 都 可 以 实现 网 页 布局 的 相对 定位 。 

将 网 页 布局 标签 的 position 属性 定义 为 absolute 之 后 ， 会 将 其 从 网 页 当前 的 流动 布 
局 或 浮动 布局 中 脱离 出 来 。 此 时 ， 用 户 必须 最 少 通过 定义 其 左 人 出、 上方、 右 侧 和 下 方 4 
种 针对 <body> 标 签 的 距离 属性 中 的 一 种 ， 来 实现 其 定位 。 和 否则 position 的 属性 值 将 不 起 
作用 (通常 需要 定义 顶部 和 左 侧 两 种 )。 例 如 , 定义 网 页 布局 标签 距离 网 页 顶部 为 100px， 
左 侧 为 30px， 其 代码 如 下 所 述 。 


position:absolute; 

top:100px; 

left:30px; 

position 的 属性 的 fixed 属性 值 是 一 种 特殊 的 属性 值 。 通 常 在 网 页 设计 过 程 中 ， 绝 大 
多 数 的 网 页 布局 标签 定位 〈 包 括 绝对 定位 ) 都 是 针对 网 页 中 的 <body> 标 签 。 而 fixed 属 
性 值 所 定义 的 网 页 布局 标签 则 是 针对 <html> 标 签 , 所 以 可 以 设置 网 页 标签 在 页 面 中 漂浮 。 





2. 设置 层叠 次 序 


使 用 CSS 样式 表 ， 除 了 可 以 精确 地 设置 网 页 标签 的 位 置 之 外 ， 还 可 以 设置 网 页 标签 
的 层 释 顺序。 首先 ， 需 要 通过 CSS 样式 表 的 position 属性 定义 网 页 标签 的 绝对 定位 ， 然 
后 再 使 用 CSS 样式 表 的 z-index 属性 。 

在 层 全 后 , 将 按照 用 户 定义 的 z-index 属性 决定 层 全 位置 , 或 自动 按照 其 代码 在 网 页 
中 出 现 的 顺序 依次 层 释 显示。z-index 属性 的 值 为 0 或 任意 正 整数 ， 无 单位 。z-index 属性 
值 越 大 , 则 网 页 布局 标签 的 顺序 越 高 。 例如, 两 个 这 分别 为 divl 和 div2 的 层 , 其 中 div1 
覆盖 在 div2 上 方 ， 则 代码 如 下 所 述 。 
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#divil { 
position:absolute; 
z-index:2; 

} 

#div2 { 
position:absolute; 
z-index:1; 

} 


3. 可视化 布局 


可 视 化 布局 是 指 通过 CSS 样式 表 ， 来 定义 各 种 布局 标签 在 网 页 中 的 显示 情况 。 在 
CSS 样式 表 中 ， 人 允许 用 户 使 用 visibility 属性 ， 定 义 网 页 布局 标签 的 可 视 化 性 能 。 其 中 ， 
该 属性 包括 表 9-8 中 的 4 种 关键 字 属 性 值 。 

2 表 9-8 ,可视化 布局 属性 值 





属 性 值 








默认 值 ， 定 义 网 页 布局 标签 可 见 
定义 网 页 布局 标签 隐藏 

定义 表格 的 行 或 列 隐藏 ， 但 可 被 脚本 程序 调用 
从 父 网 页 布局 标签 中 继承 可 视 化 方式 





在 visibility 属性 中 , 用 户 可 以 方便 地 通过 visible 和 hidden 属性 值 切 换 网 页 布局 标签 
的 可 视 化 性 能 ， 使 其 显示 或 隐藏 。 

用 户 在 设置 visibility 属性 与 display 属性 时 ， 有 一 定 的 区 别 。 如 设置 display 属性 的 
值 为 none 之 后 , 被 隐藏 的 网 页 布局 标签 往往 不 会 在 网 页 中 再 占据 相应 的 空间 。 通 过 设置 
visibility 属性 定义 hidden 的 网 页 布局 标签 ， 则 会 保留 其 占据 的 空间 ， 除 非 将 其 设置 为 绝 
对 定位 。 





4. 布局 剪 切 


在 CSS 样式 表 中 ,还 提供 了 一 种 可 剪 切 绝对 定位 布局 标签 的 工具 ， 将 所 有 位 于 显示 
区 域外 的 部 分 剪 切 掉 ， 使 其 无 法 在 网 页 中 显示 。 

在 剪 切 绝对 定位 的 标签 时 , 需要 使 用 CSS 样式 表 中 的 clip 属性 , 其 属性 值 包括 矩形 、 
auto 和 inherit。auto 属性 值 是 clip 属性 的 默认 属性 值 ， 其 作用 为 不 对 网 页 布局 标签 进行 
任何 剪 切 操作 ， 或 剪 切 的 矩形 与 网 页 布局 标签 的 大 小 和 位 置 相同 。 

算 形 属性 值 与 颜色 、URL 类 似 , 都 是 一 种 特殊 的 属性 值 对 象 。 在 定义 矩形 属性 值 时 ， 
需要 为 其 使 用 rect0 方 法 , 同时 将 矩形 与 网 页 的 4 条 边 之 间 的 距离 作为 参数 , 填写 到 rect() 


方法 中 。 例 如， 定义 一 个 距离 网 页 左 侧 20px， 顶 部 45px， 右 侧 30px， 底 部 26px 的 矩形 ， 
其 代码 如 下 所 述 。 

rect (20px 45px 30px 26px) 

用 户 可 以 方便 地 将 上 述 代码 应 用 到 clip 属性 中 ， 以 绝对 定位 的 网 页 布局 标签 进行 剪 
切 操作 ， 其 代码 如 下 所 述 。 


position:absolute; 
clip:rect (20px 45px 30px 26px); 





0.4 应 用 IFrame 框架 


IFrame 框架 (浮动 框架 ) 又 被 称 作 嵌入 帧 ， 是 一 种 特殊 的 框架 结构 ， 它 可 以 像 层 一 
样 插入 到 普通 的 HTML 网 页 中 。IFrame 框架 是 一 种 特殊 的 框架 技术 , 但 由 于 Dreamweaver 
中 没有 提供 该 框架 的 可 视 化 操作 ， 因 此 在 应 用 该 框架 时 还 需要 编写 一 些 网 页 源 代 码 。 


IFrame 框架 是 一 种 灵活 的 框架 ， 是 一 种 块 状 对 象 ， 其 与 层 (div) 的 属性 非常 类 似 ， 
所 有 普通 块 状 对 象 的 属性 都 可 以 应 用 在 浮动 框架 中 。 当 然 ， 浮 动 框架 的 标签 也 必须 遵循 
HTML 的 规则 ， 例 如 必须 闭合 等 。 在 网 页 中 使 用 下 rame 框架 ， 其 代码 如 下 所 示 。 


<iframe src="index.html" id="newframe"></iframe> 


IFrame 框架 可 以 使 用 所 有 块 状 对 象 可 以 使 用 的 CSS 属性 以 及 HTML 属性 。IE 5.5 
以 上 版 本 的 浏览 器 已 开始 支持 透明 的 IFrame 框架 。 只 需 将 IFrame 框架 的 
allowTransparency 属性 设置 为 tue， 并 将 嵌入 的 文档 背景 颜色 设置 为 allowTransparency， 
即 可 将 框架 设置 为 透明 。 

在 使 用 IFrame 框架 时 需要 了 解 和 注意 , 该 标签 仅 在 微软 的 下 4.0 以 上 版 本 浏览 器 中 
被 支持 。 并 且 该 标签 仅仅 是 一 个 HTML 标签 。 因 此 在 使 用 IFrame 框架 时 ， 网 页 文档 的 
DTD 类 型 不 能 是 Strict (严格 型 )。 


插入 IFrame 框架 的 方法 非常 简单 , 用 户 只 需 在 页 面 中 选择 插入 位 置 , 然后 在 【插入 】 
面板 中 的 【常用 】 选 项 卡 中 ， 单 击 下 RAME 按钮 即 可 ， 如 图 9-32 所 示 。 

此 时 ， 在 【代码 】 视 图 中 ， 将 生成 下 rame 框架 的 代码 ， 即 <iframe> </iframe> 标 签 ， 
如 图 9-33 所 示 。 

为 了 完善 框架 ， 还 需要 在 <iffame></iframe> 标 签 中 输入 源 代码 ， 即 用 于 规范 框架 
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大 小 的 源 代码 。 
<iframe width="700" name= 
"Pow"height="600" scrolling= 
"auto™" frameborder="1"” src= 
"Untitled-4.html"></iframe> 


此 时 , 页 面 中 插入 的 下 rame 框 
架 的 位 置 会 变 成 灰色 区 域 ， 而 
Untitled-4 页 面 则 会 出 现在 IFrame 
框架 内 容 ， 用 户 可 在 浏览 器 中 查看 
最 终 效果 ， 如 图 9-34 所 示 。 

IFrame 框架 除了 可 以 使 用 普通 
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块 状 对 象 的 属性 ， 也 可 以 使 用 一 些 
专 有 的 属性 ， 其 各 种 属性 的 具体 含 
义 ， 如 下 所 述 。 

口 width 定义 IFrame 框架 的 
宽度 ， 其 属性 值 为 由 整数 与 
单位 或 百分比 组 成 的 长 度 值 。 

口 height 定义 浮动 框架 的 高 
度 , 其 属性 值 为 由 整数 与 单 
位 或 百分比 组 成 的 长 度 值 。 

口 name 用 于 设置 浮动 框架 
的 唯一 名 称 。 

口 scrolling 用 于 设置 浮动 框 
架 的 滚动 条 显示 方式 . 

口 frameborder 用 于 控制 框 
架 的 边框 , 定义 其 在 网 页 中 
是 否 显示 。 其 属性 值 为 0 或 
者 1。0 代表 不 显示 , 而 1 
代表 显示 。 

口 align 用 于 设置 浮动 框架 
在 其 父 对 象 中 的 对 齐 方式 ， 
top 属性 值 表示 对 齐 在 其 父 
对 象 的 顶端 , middle 属性 值 


表示 对 齐 在 其 父 对 象 的 中 间 ， 


和 | 图 9-32 插入 IFrame 框架 





<ldoctype html> ~ 
<html> 

<head> 

<meta charset="utf-8"> 


<title> 无 标题 文档 </title> 
</head> 


</body> 


I 
2 
3 
4 
5 
6 
¥ 
<body><iframe></iframe> 
9 
6 </html> 
1 








和 图 9-33_, 代 码 标签 
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介质 全 次 而 好 人 书后 上 0) Qi100% 4 
和 图 9-34 ,最 终结 果 


left 属性 值 表示 对 齐 在 其 父 对 象 的 左 侧 ，right 属性 


值 表示 对 齐 在 其 父 对 象 的 右 侧 ，bottom 属性 值 表示 对 齐 在 其 父 对 象 的 底 端 。 
口 longdesc 定义 获取 描述 浮动 框架 的 网 页 的 URL。 通过 该 属性 ， 可 以 用 网 页 作为 


浮动 框架 的 描述 。 


口 marginheight 用 于 设置 浮动 框架 与 父 对 象 项 部 和 底部 的 边 距 。 其 值 为 整数 与 像 

素 组 成 的 长 度 值 。 

口 marginwidth 用 于 设置 浮动 框架 与 父 对 象 左 侧 和 右 侧 的 边 距 。 其 值 为 整数 与 像 

素 组 成 的 长 度 值 。 ER 

口 src 用 于 显示 浮动 框架 中 网 页 
的 地 址 ， 其 可 以 是 绝对 路 径 ， 
也 可 以 是 相对 路 径 。 









































@ -9.4.3 链接 IFrame 











链接 IFrame 框架 页 面 的 方法 与 创 
建 普通 链接 的 方法 基本 相同 , 其 不 同 在 
于 所 设置 的 “目标 ”属性 必须 与 IFrame 
框架 名 称 保持 一 致 。 
首先 ， 在 页 面 中 选择 左 侧 的 图 像 ， 
并 在 【属性 】 面板 中 将 【链接 】 属 性 设 
置 为 Untitled-4.html， 将 【目标 】 属 性 
设置 为 bow， 如 图 9-35 所 示 。 
然后 ， 在 页 面 中 选择 右 侧 的 图 像 ， 
并 在 【属性 】 面板 中 将 【链接 】 属 性 设 
置 为 Untitled-5.html， 将 【目标 】 属 性 
设置 为 bow， 如 图 9-36 所 示 。 
【了 图 9-36 ,设置 右 侧 图 像 属 性 
RADoW nfame| so sma >AH BE Ga TR WH | 一口 X 
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9-35 设置 左 侧 图 像 属 性 
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则 将 无 法 正常 打开 1 框架 中 所 链接 的 名 由 二 ”全 疙 信人 众 力 恕 扩 甩 ， 自 网 归 ”国王 # ”四 游戏 。 月 登录 管家 
页 面 。 
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保持 当前 页 面 , 在 浏览 器 中 可 ei 
览 下 rame 框架 页 面 的 最 终 效 果 。 
户 单 击 浏览 器 右 侧 的 图 片 时 ,在 IFrame 
框架 中 将 会 显示 所 链接 的 页 面 ， 如 图 
9-37 所 示 。 





当 用 户 单 击 右 侧 图 像 时 ， 在 IFrame 框架 中 
出 现 了 滚动 条 ， 这 是 因为 IFrame 框架 的 大 
小 是 固定 的 ， 而 右 侧 图 像 所 链接 的 页 面 宽度 
超过 了 框架 高 度 ， 因 此 会 出 现 滚动 条 。 
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商品 列表 





商品 列表 页 的 作用 是 展示 各 种 商品 的 样式 、 名 称 及 价格 等 信息 。 在 制作 商品 列表 时 ， 
可 以 使 用 CCS 样式 表 的 浮动 布局 , 不 仅 可 以 实现 页 面 的 布局 , 而 且 还 可 以 为 网 页 中 各 种 
块 状 标签 定位 。 在 本 练习 中 ， 将 通过 制作 一 个 简单 的 商品 显示 页 面 ， 来 详细 介绍 CSS 样 
式 表 的 使 用 方法 ， 如 图 9-38 所 示 。 
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操作 步骤 : 
打开 素材 页 面 , 将 光标 置 于 1D 为 “content” CSS 规则 ， 如 图 9-40 所 示 。 


的 Div 层 中 ， 执 行 【插入 】IDiv 命令 ， 插 入 
ID 为 “leftmain” 的 Div 层 , 并 设置 CSS 规 
则 ， 如 图 9-39 所 示 。 














#rightmain { 
width:669px; 
height:449px; 
margin-left:6px; 
float: left; 


- border: lpx solid #CCC; 


图 9-40 插入 “rightmain” 层 





































上 四 插入 #1eftmain { 

3 width: 198px; 
height:446px; 
background-cotor:#f2f2f2; 
了 float: left; 

border: lpx solid #CCC; 















































结 。 加 设置 好 将 光标 置 于 ID 为 “leftmain” 的 Div 层 中 ， 
人 插入 ID 为 “menutTitle” 的 Div 层 ， 并 设置 

A 9-39 搬入 “etain 层 CSS 规则 ， 如 图 9-41 所 示 。 
将 光标 置 于 ID 为 “content” 的 Div 层 中 ， | 贺 将 光标 置 于 ID 为 “leftmain” 的 Div 层 中 ， 
插入 ID 为 “rightmain” 的 Div 层 ， 并 设置 插入 ID 为 “menu” 的 Div 层 , 并 设置 CSS 





规则 ， 如 图 9-42 所 示 。 





#menutTitLef 


background-image: 
url(images/Main_menu_title.gif); 

height:40px; 

margin-bottom:29px; 











图 9-41 插入 “menutTitle” 层 





smenu{ 
height:250px; 








图 9-42 插入 “menu” 层 


将 光标 置 于 ID 为 “menu” 的 Div 层 中 , 输 
入 文本 “礼品 袋 "， 单 击 【 项 目 列表 】 按钮 ， 
创建 项 目 列表 , 并 输入 列表 文本 , 如 图 9-43 
所 示 。 








#Content #leftmain smenu ul { 
margin: Opx; 
padding: epx; 
list-style-type: none; 

} 

#content #leftmain smenu ul Li { 
display: block; 
width: 158px; 
border-bottom-width: 1px; 
border-bottom-style: dashed; 
border-bottom-color: #333; 
Line-height: 3epx; 
height: 30px; 
margin-top: ©; 
margin-right: auto; 
margin-bottom: 6; 
margin-left: auto; 








} 


和 | 图 9-44 ,设置 <ul> 和 <li> 标 签 CSS 规则 











和 图 9-45 ,插入 “ico.gif” 图 像 

加 选择 文本 , 在 【属性 】 面板 中 ， 将 【链接 】 
设置 为 “javascript:void(null);”， 如 图 9-46 
所 示 。 




















和 图 9-43 ,创建 项 目 列表 


加 在 标签 栏 选择 <ul> 标 签 , 设置 其 CSS 规则 。 
使 用 同样 方法 ， 设 置 <li> 标 签 的 CSS 样式 ， 
如 图 9-44 所 示 。 

将 光标 置 于 “礼品 袋 ”文本 之 前 ,执行 【 插 
入 】1[【 图像 ] 命令 ， 插 入 “ico.gif” 图 像 ， 
如 图 9-45 所 示 。 使 用 同样 方法 ， 插 入 其 他 
文本 前 图 像 。 





和 图 9-46 设置 链接 

图 使 用 同样 方法 , 设置 其 他 文本 链接 。 在 标签 
栏 中 选择 <a> 标 签 ， 设 置 其 CSS 规则 ， 如 
图 9-47 所 示 。 

将 光标 置 于 1D 为 “rightmain” 的 Div 层 中 ， 
插入 ID 为 “newsTitle” 的 Div 层 ， 并 设置 
其 CSS 规则 ， 如 图 9-48 所 示 。 

将 光标 置 于 “newsTitle” 中 ， 执行 【 插 


入 【图像 命令 ,插入 “Main_news_top.gif” 





图 像 ， 如 图 9-49 所 示 。 将 光标 置 于 类 名 称 为 “rows” 的 Div 层 中 ， 
di 人 插入 类 名 称 为 “pic” 的 Div 层 ， 并 设置 其 
四 CSS 规则 ， 如 图 9-51 所 示 。 


text-decoration: none; 
margin-left: 19px; 


























width:145px; 
height:145px; 

margin:6 auto; 
border:1px dashed #F60; 














和 图 9-51 ,插入 “pic” 层 


) 将 光标 置 于 类 名 称 为 “rows” 的 Div 层 中 ， 
WnewsTiELeT 插入 类 名 称 为 “picText” 的 Div 层 , 并 设置 


height:17px; 


background-cotor:#f4f4f4; 其 CSS 规则 ， 如 图 9-52 所 示 。 
} 











.picText{ 

height:25px; 
line-height: 25px; 
text-align: center; 
color: #0240a3; 
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图 9-52 插入 “picText” 层 





图 9-49 _ 插 入 “Main_news_top.gif” 图像 将 光标 置 于 类 名 称 为 “pic” 的 Div 层 中 ， 


在 ID 为 “newsTitle”Div 层 的 下 方 插入 类 执行 [插入 镍 图 像 ] 命 令 , 插入 “pic1jpg” 
名 称 为 “rows” 的 Div 层 ， 并 设置 其 CSS 图 像 ， 如 图 9-53 所 示 。 


规则 ， 如 图 9-50 所 示 。 








width:147px; 
height:172px; 
float:left; 
margin:10px 8px; 




















图 9-53 入 “picl.jpg” 图 像 
图 9-50 .插入 “rows” 层 习 图 9-53 .插入 “picljpg” 图 














将 光标 置 于 类 名 称 为 “picText 的 Div 层 中 ， 
插入 图 像 并 输入 文本 ， 如 图 9-54 所 示 。 使 
用 同样 方法 ， 制 作 其 他 “rows” 层 。 














/LJ 了 图 9-54 .插入 图 像 并 输入 文本 


9.6 课堂 练习 : 制作 网 页 相册 





在 制作 网 页 相册 时 ， 太 多 的 图 片 容易 占据 网 页 空间 。 为 了 节省 网 页 空间 ， 需 要 缩小 
图 片 并 在 浏览 时 放大 图 片 。 此 时 ， 可 以 使 用 Dreamweaver 中 的 “显示 -隐藏 元 素 ” 行 为 ， 
为 图 片 添加 鼠标 单 击 行为 ， 通 过 定义 AP 元 素 的 显示 和 隐藏 状态 ， 实 现 节约 网 页 空间 的 
目的 ， 如 图 9-55 所 示 。 











和 图 9-55 ,网 页 相册 


操作 步骤 : 

新 建 空白 文档 ， 在 【 属性 ] 面板 中 ,将 【 文 人 
档 标题 ] 设置 为 “网 页 相册 ”， 并 保存 文档 ， | | 。 si naraescwar_an 
如 图 9-56 所 示 。 6 一 一 

在 【CSS 设计 器 ] 面板 中 , 单 击 【添加 CSS 加 ee 
源 ] 按钮 ， 选 择 【附加 现 有 的 CSS 文件 】 » [ad A 
选项 ， 如 图 9-57 所 示 。 2 

在 弹出 的 【使 用 现 有 的 CSS 文件 】 对 话 框 

中 ， 单 击 【 浏 览 ] 按钮 ， 如 图 9-58 所 示 。 | 和 7 图 9-56 .设置 文档 标题 
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发 了 图 9-58 【使 用 现 有 的 CSS 文件 】 
对 话 框 


在 弹出 的 【选择 样式 表 文件 】 对话 框 中 ， 选 
择 CSS 样式 表 文 件 ， 单 击 【 确定 】 按钮 ， 
如 图 9-59 所 示 。 





组 织 ” 。 新 建文 件 赤 


” Biees) 
] Untded-4asp 


jn v 
相 N 于 : 区 本 可 


文件 g(Nk |indexcss[ 四 单 击 |e ~ 
[Las 有 | Cw ] | ww 


三 OneDrive 


























和 图 9-59_ 选择 CSS 样式 表 文件 

切换 到 【设计 】 视 图 中 ， 执 行 【插入 】IDiv 
命令 ， 插 入 ID 为 “showBig0” 的 Div 层 ， 
如 图 9-60 所 示 。 























在 了 图 9-60 插入 “showBig0” 层 

回击 除 层 中 的 文本 ,执行 【插入 】I【 图 像 ] 命 
令 , 插入 “rahmen.png” 图 像 ， 如 图 9-61 
所 示 。 














图 9-61 插入 “rahmen.png” 图 像 


执行 【插入 】IDiv 命令 , 插入 ID 为 
“showBig1” 的 Div 层 ， 如 图 9-62 所 示 。 








和 | 图 9-62 ,插入 “showBigl1” 层 
图 在 [属性 ] 面板 中 , 将 “showBig1”Div 层 
的 【类 】 设置 为 img， 如 图 9-63 所 示 。 














TREE 
hh < 1 











和 图 9-63 ,设置 【类 】 属 性 


图 开除 层 中 的 文本 ,执行 【插入 ] 1【 图 像 ] 命 
令 ， 插 入 “A_Dreamy_World_7th.jpg” 图 
像 ， 如 图 9-64 所 示 。 




















9-64 插入 “A_Dreamy_World_ 
7th.jpg” 图 像 


重复 (7 )~( 9 ) 步 骤 , 分 别 插入 “showBig2” 
~“showBig8”Div 层 ， 设 置 其 【类 】 属 性 
并 插入 图 像 ， 如 图 9-65 所 示 。 


1 <div class="ing" 1d="showBig2"><img src= 
"images/A_Dreamy_World_9th.jpg" width="1699"” height= 
"128@" alt=""/></div> 

13 <div class="img" 1d="showBig3"><img src= 
"images/A_Dreamy_World_1eth.jpg" width="1680" height=| 

"/></div> 

14 <div class="img" 1d="showBig4"><img src= 
“images/A_Dreamy_World_19th.jpg" width="1680" height=| 
"1260" alt=""/></div> 

15 <div class="img" id="showBig5"><img src= 
"images/A_Dreamy_World_25th.jpg" width="1696”height= 
"128e" alt=""/></div> 

mg" 1d="showBig6"><img src= 
"images/A_Dreamy_World_29th. jpg" width="1696”height= 
"1280" alt=""/></div> 

17 <div class="img" id="showBig7"><img src= 
"images/A_Dreamy_World_31st.jpg" width="1696" height=| 
"1280" alt=""/></div> 

18 <div class="img" id="showBiga"><img src= 
"images/A_Dreamy_World_32nd.jpg" width="1686" height=| 
"1290" alt=""/></div> 


9-65 制作 其 他 “showBig” 层 




















在 页 面 的 下 方 , 执行 【插入 】IDiv 命令 ， 插 
入 ID 为 “choose1” 的 Div 层 ， 如 图 9-66 
所 示 。 








二 


上 Se f 
和 图 9-66 ,插入 “choosel1” 的 层 








在 【属性 】 面板 中 , 将 “showBig1”Div 层 
的 【类 】 设 置 为 smlmg， 如 图 9-67 所 示 。 








& 了 图 9-67 设置 【类 】 属 性 


删除 层 中 的 文本 ,执行 【插入 】 |【 图 像 ] 命 
令 ， 插 入 “A_Dreamy_World_7th.jpg” 图 
像 ， 如 图 9-68 所 示 。 








和 了 图 9-68 ,再 次 插入 “A_Dreamy_World_ 
7th-jpg” 图 像 
重复 步骤 ( 11 )~( 13 ), 分 别 插入 “choose2” 
~“choose8”Div 层 , 设置 其 【类 】 属 性 并 
插入 图 像 ， 如 图 9-69 所 示 。 














用 图 9-69 ,制作 其 他 “choose” 层 


选中 “choose1”Div 层 中 的 图 像 , 单 击 【 行 
为 】 面板 中 的 【添加 行为 按钮， 选择 【 显 
示 -- 隐 藏 元 素 】 选 项 ， 如 图 9-70 所 示 。 
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和 图 9-70 。[【 行 为】 面板 

在 【 显示 -隐藏 元 素 】 对 话 框 中 ， 选 择 列表 

中 对 应 的 图 像 ， 单 击 【 显示 】 按钮 ， 显 示 该 
图 像 ， 如 图 9-71 所 示 。 

将 固定 不 变 图 像 设置 为 【默认 ]， 其 他 图 像 

设置 为 【隐藏 ]， 如 图 9-72 所 示 。 使 用 同 

样 方法 , 设置 其 他 图 像 的 “显示 -隐藏 "行为 。 


9.7 思考 与 练习 








一 、 填 空 题 


Ll 是 一 种 提高 网 页 制作 效率 的 有 效 
工具 ， 主 要 用 于 设计 一 些 布局 结构 比较 “固定 ” 
的 页 面 。 

2. 在 模板 中 创建 链接 时 ， 可 以 使 用 【属性 】 
面板 中 【 】 图标， 以 确保 存在 正确 的 链接 
路 径 。 





3 是 指 其 设计 和 可 编辑 区 域 都 基于 
另 一 个 模板 的 模板 ， 它 是 基本 模板 的 一 种 变 体 ， 
主要 用 于 控制 共享 站 点 页 面 中 的 设计 元 素 。 











4. 是 重复 区 域 的 扩展 ,是 创建 包含 
可 编辑 区 域 的 重复 区 域 表格 。 

$. 是 Dreamweaver 中 的 一 种 自 定义 
网 页 元 素 ， 可 以 在 多 个 页 面 中 重复 使 用 。 

6. 又 被 称 作 嵌入 帧 ， 是 一 种 特殊 的 





框架 结构 ， 它 可 以 像 层 一 样 插入 到 普通 的 HTML 
网 页 中 。 
二 、 选 择 题 


i 为 每 一 个 网 页 标签 进行 定义 ， 
精确 地 设置 标签 在 页 面 中 的 具体 位 置 和 层次 
次 序 。 























元 来: [后 ”hoose5” 全 
div “choose6”( 陆 藏 ) 








div“choose7 ) | 
关注 ” 寺 助 | 
(Giz) A 











9-72 设置 隐藏 图 像 


A. 绝对 定位 布局 
B. 相对 定位 布局 
C. 流动 布局 
D. 浮动 布局 
2. 将 网 页 布局 标签 的 position 属性 值 设 置 
为 后 ， 可 以 通过 设置 左 侧 、 项 部 、 底 部 
和 右 侧 4 种 CSS 属性 , 定义 网 页 标签 在 网 页 中 的 
偏 移 方式 。 
A. static B. relative 
C. absolute D. fixed 
3. 设置 CSS 盒 模型 的 填充 属性 时 ， 
属性 可 以 使 用 1 一 4 个 长 度 值 作为 属性 值 。 
A. padding 
B. padding-top 
C. padding-right 
D. padding-bottom 
4. 创建 库 项 目 通 常 只 会 包含 被 选择 的 代码 。 
如 果 网 页 中 的 元 素 使 用 的 样式 为 的 CSS， 
则 无 法 在 库 中 显示 。 
A. 内 联 B. 非 内 联 
C. 非 外 联 D. 外 联 
5 属性 只 能 应 用 于 绝对 定位 的 网 页 


布局 元 素 中 。 








A. clip 
C. inherit D. relative 
6. 是 Dreamweaver 中 另 一 种 特殊 的 
区 域 ， 用 户 可 以 对 其 进行 隐藏 或 显示 。 
A. 可 编辑 区 域 
B. 重复 区 域 
C. 可 选区 域 
D. 可 编辑 的 可 选区 


B. position 
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如何 创建 嵌 套 模板 ? 

.如 何 插入 和 链接 下 rame 框架 ? 
.如 何 设置 盒 模型 属性 ? 

。 简 述 流动 布局 的 作用 。 


上 mm P 一 


四 、 上 机 练习 


1. 分 离 模板 

在 本 练习 中 , 将 运用 模板 功能 ,详细 介绍 分 
离 模 板 的 操作 方法 , 如 图 9-73 所 示 。 首 先 执行 [ 文 
件 】I【 打 开 】 命令 ,在 弹出 的 【打开 】 对 话 框 中 ， 
选择 【网 站 模板 】 选 项 卡 中 的 模板 文件 ， 并 单 击 
【新 建 】 按钮 , 打开 模板 文件 。 然后, 执行 【修改 】 
1【 模 板 】I【 从 模板 中 分 离 】 命令， 即 可 将 网 页 与 





Styles Articles Notes 





模板 的 联系 完全 切断 。 最 后 ， 执 行 【 文 件 】|【 另 
存 为 】 命 令 ,设置 保存 位 置 和 名 称 ， 单 击 【 保 存 】 
按钮 即 可 。 之 后 模板 的 更 新 将 不 会 改变 该 网 页 ， 
而 该 网 页 中 的 所 有 内 容 也 都 可 以 自由 编辑 。 





电机 | 强 | 全 | 




















9-73 分 离 模板 


2. 制作 商品 展示 页 

本 练习 中 ， 将 使 用 CSS 样式 等 功能 ， 来 制 
作 一 个 商品 展示 页 网 页 ， 如 图 9-74 所 示 。 首 先 新 
建 空白 文档 , 关联 外 部 CSS 样式 表 文 件 。 在 网 页 
中 ， 插 入 人 嵌 套 Div 层 ， 插 入 图 像 和 表单 元 素 ， 输 
入 标题 文本 来 制作 版 头 内 容 。 然 后 ， 插 入 一 个 名 
为 “menu” 的 层 ， 指 定 CSS 样式 , 输入 文本 并 设 
置 文本 的 链接 属性 ， 用 以 显示 导航 栏 内 容 。 


Alonglinktext 








和 图 9-74 ,商品 展示 页 
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网 页 交互 行为 


10.1 “网 页 行为 概述 


WAAL 








两 者 是 相辅相成 的 。 

Dreamweaver 行为 将 JavaScript 代码 放置 到 文档 中 , 这 样 访问 者 就 可 以 通过 多 种 方式 
更 改 网 页 ， 或 者 启动 某 些 任务 。 行 为 可 以 被 添加 到 各 种 网 页 元 素 上 ， 如 图 像 、 文 本 、 多 
媒体 文件 等 ， 除 此 之 外 还 可 以 被 添加 到 HTML 标签 中 。 


1. 事件 


事件 是 浏览 器 生成 的 消息 ， 它 指示 该 页 的 访问 者 已 执行 了 某 种 操作 。 不 同 的 页 面 元 
素 定义 了 不 同 的 事件 。 例 如 ， 在 大 多 数 浏览 器 中 ，onMouseOver 和 onClick 是 与 链接 关 
联 的 事件 ， 而 onLoad 是 与 图 像 和 文档 的 body 部 分 关联 的 事件 。 

单个 事件 可 以 触发 多 个 不 同 的 动作 ， 用 户 可 以 指定 这 些 动作 发 生 的 顺序 。 


2. 动作 


动作 是 一 段 预先 编写 的 JavaScript 代码 ， 可 用 于 执行 诸如 打开 浏览 器 窗口 、 显 示 或 
隐藏 AP 元 素 、 播 放声 音 或 停止 播放 Adobe Shockwave 影片 等 任务 。 

当 行为 添加 到 某 个 网 页 元 素 中 后 ， 每 当 该 元 素 的 某 个 时 间 发 生 时 ， 行 为 即 会 调用 与 
这 一 事件 关联 的 动作 〈JavaScript 代码 )。 例 如 ， 将 “弹出 消息 ”动作 附加 到 一 个 链接 上 ， 
并 制定 它 将 由 onMouseOver 事件 触发 ， 则 只 要 将 指针 放 在 该 链接 上 ， 就 会 弹出 消息 。 

Dreamweaver 所 提供 的 动作 提供 了 最 大 程度 的 跨 浏览 器 兼容 性 。 














Dreamweaver 提供 了 一 个 面板 来 专门 管理 和 
编辑 行为 ， 即 【行为 】 面 板 。 在 Dreamweaver 中 
执行 【窗口 1【 行 为 】 命令 ( 按 Shift+F4 组 合 键 ) 
即 可 打开 该 面板 。 使 用 【行为 】 面 板 ， 可 以 为 对 
象 添加 所 有 的 行为 ， 还 可 以 修改 当前 选择 行为 的 
一 些 参数 ， 如 图 10-1 所 示 。 KJ 了 图 10-1 【行为 】 面板 

在 【行为 】 面 板 中 ， 除 了 可 以 显示 当前 标签 
名 称 和 所 添加 的 行为 信息 之 外 ， 还 提供 了 用 于 编辑 网 页 行为 的 6 个 按钮 ， 具体 情况 如 表 
10-1 所 示 。 








S23 表 10-1 行为 面板 中 的 按钮 











显示 添加 到 当前 文档 中 的 事件 
显示 所 有 添加 的 行为 事件 

单 击 弹 出 行为 菜单 ， 添 加 行为 
从 当前 行为 表 中 删除 所 选 事件 
动作 项 向 前 移 ， 改 变 执行 顺序 
动作 项 向 后 移 ， 改 变 执行 顺序 








显示 设置 事件 
显示 所 有 事件 
添加 行为 
删除 事件 
增加 事件 值 
降低 事件 值 


使 用 这 些 按钮 可 以 方便 地 为 网 页 中 各 种 对 象 添加 行为 ， 以 及 管理 已 添加 的 各 种 行为 
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件 。 


Dreamweaver 内 置 的 各 种 行为 , 形成 了 一 个 JavaScript 程序 库 。 




















户 只 需 用 鼠标 选择 


各 种 动作 ， 并 设置 一 些 简 单 的 参数 ， 即 可 为 其 设置 激发 的 事件 ， 将 库 中 的 JavaScript 代 














码 应 用 到 网 页 中 。 

















在 编辑 行为 前 首先 应 选择 对 象 。 在 Dreamweaver 中 ， 可 以 将 网 页 中 所 有 的 标签 〈 包 


括 整 个 网 页 、 网 页 中 各 种 文本 、 图 像 、 多 媒体 、 表 格 、 层 、 框 架 等 ) 作为 行为 的 对 象 。 


不 同 的 对 象 可 以 添加 不 同 的 行为 , 并 可 以 设置 各 种 触发 动作 的 事件 。 在 Dreamweaver 中 ， 


支持 所 有 JavaScript 寻 








有 件 作为 行为 触发 的 条 件 ， 如 表 10-2 所 示 。 




















323 表 10-2 常见 的 JavaScript 行 为 

事件 类 型 浏览 器 支持 应 用 对 象 事件 含义 
onAbort IE 4.0、NetScape 3.0 | 图 像 、 页 面 等 中 断 对 象 载 入 触发 该 事件 
onAfterUpdate IE 4.0 图 像 、 页 面 等 对 象 更 新 时 触发 事件 
onBeforeUpdate IE 4.0 图 像 、 页 面 等 对 象 更 新 前 触发 事件 
onBlur IE 3.0、NetScape 2.0 | 按钮 、 链 接 、 文 本 框 等 ”| 对 象 移 开 焦点 触发 事件 
onBounce IE4.0 滚动 字幕 等 et ee 

事件 
onChange 改变 对 象 值 时 他 发 事件 
onClick IE 3.0、NetScape 2.0 | 所 有 元 素 单 击 对 象 
onDblclick 双击 对 象 
onError IE 4.0、NetScape 3.0 | 图 像 、 页 面 等 入 对 区 时 发 生 俏 并 焰 发 而 
onFocus IE 3.0、NetScape 2.0 | 按钮、 链接 、 文 本 框 等 ” | 对 象 获取 焦点 时 触发 事件 
onHelp | 下 40 | 图 你 等 | 调用 帮助 时 触发 事件 
onKeyDown IE 4.0、NetScape 4.0 | 链接 图 像 、 文 字 等 as 
‘onKeyPress 链接 图 像 、 文 字 等 es 
onKeyUp IE 4.0、NetScape 4.0 | 链接 图 像 、 文 字 等 释放 被 按 下 的 键 时 触发 事件 
0 
onMouseDown 正 4.0、NetScape 4.0 | 链接 图 像 、 文 字 等 按 下 鼠标 左 键 时 触发 事件 
onMouseMove 正 3.0、NetScape 4.0 | 链接 图 像 、 文 字 等 鼠标 指针 移动 时 触发 事件 
onMouseOut IE 4.0、NetScape 3.0 | 链接 图 像 、 文 字 等 
鼠标 指针 移 到 对 象 范围 上 方 

onMouseOver 链接 图 像 、 文 字 等 时 触发 事件 
onMouseUp IE 4.0、NetScape 4.0 | 链接 图 像 、 文 字 等 ci 后 检 开 轩 直 发 
onMove IE 4.0、NetScape 4.0 | 页 面 等 ee 
onReadyStateChange |IE 5.0 图 像 等 J ‘< 的 后 属性 伯 发 生变 化 








续 表 














事件 类 型 
onReset 


浏览 器 支持 应 
和 


正 4.0、NetScape 4.0 | 主 窗口 、 帧 窗口 等 





对 象 属性 被 激发 时 他 发 事件 
注 览 器 窗口 大 小 被 改变 时 角 
发 事件 

数据 发 生变 化 并 有 新 数据 时 
触发 事件 

数据 将 要 发 生变 化 时 触发 事 
件 

滚动 条 位 置 发 生变 化 时 触发 
事件 

文本 内 容 被 选择 时 触发 事件 


对 象 开 始 显示 内 容 时 触发 








onResize 














onRowEnter Shockwave 等 





onRowEixt 





onScroll 










对 象 被 递交 时 触发 事件 


onUnload 对 象 将 被 改变 时 触发 事件 

编辑 行为 的 触发 事件 ， 可 以 直接 在 【行为 】 面 板 中 选择 已 添加 好 的 行为 ， 单 击 行为 
的 触发 事件 ， 即 可 在 弹出 的 下 拉 菜 单 中 选择 相应 的 事件 或 直接 在 事件 的 菜单 文本 框 中 输 
入 事件 的 类 型 。 


10.2 设置 网 页 行为 





Dreamweaver 为 用 户 内 置 了 多 种 网 页 信息 行为 ， 包 括 常 用 的 窗口 弹出 信息 、 打 开 浏 
览 器 窗口 ， 以 及 交互 图 像 、 改 变 属性 、 跳 转 菜 单 等 行为 。 





通过 Dreamweaver 内 置 的 各 种 JavaScript 脚本 ， 用 户 可 以 方便 地 添加 和 更 改 各 种 
HTML 容器 、 网 页 浏览 器 状态 栏 等 内 部 的 文本 信息 。 


1. 设置 容器 文本 


容器 是 网 页 中 包含 内 容 的 标签 的 统称 ， 典 型 的 容器 包括 各 种 定义 ID 的 表格 、 层 、 
框架 、 段 落 等 块 状 标签 。 首 先 ,在 pp 
网 页 中 插入 一 个 包含 CSS 样式 的 
Div 元 素 , 然后 选择 该 元 素 , 在 【 行 
为 】 面 板 中 单 击 【添加 行为 】 按 钮 ， 
在 弹出 的 菜单 中 选择 【设置 文本 】| 
【设置 容器 的 文本 】 选 项 , 如 图 10-2 
所 示 。 

然后 ， 在 弹出 【设置 容器 的 文 
本 】 对 话 框 中 的 【容器 】 选 项 ， 主 和 图 10-2 选择 元 素 
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要 用 于 设置 网 页 中 可 以 包含 文本 或 其 他 元 



































素 的 任何 元 素 ， 用 户 可 通过 单 击 其 下 拉 按 | ww fan | 本 到 
钮 来 选择 容器 。 而 【新 建 HTML】 选 项 ， | 新 壮 HTw | 本 训 C55 笠 起 : 一 
则 用 于 输入 在 容器 中 所 需要 显示 的 相关 内 v 

















容 ， 如 图 10-3 所 示 。 


设置 【容器 】 和 【新 建 HTML】 选 项 
之 后 ， 单 击 【 确 定 】 按 钮 ， 即 可 创建 一 个 
文本 信息 行为 。 此 时 ， 在 【行为 】 面 板 中 
将 显示 新 创建 的 行为 ， 如 图 10-4 所 示 。 

此 时 , 用 户 可 通过 正 浏览 器 查看 网 页 
中 的 内 容 。 当 执行 该 文档 时 ， 其 源 内 容 将 
被 【新 建 HTML) 文本 框 中 所 输入 的 内 容 
替换 ， 如 图 10-5 所 示 。 


2. 设置 文本 域 文字 


文本 域 文字 行为 可 以 将 指定 的 内 容 替 
换 表 单 文本 域 中 的 内 容 。 

首先 ， 在 网 页 中 插入 一 些 表单 元 素 ， A 了 图 10-5 效果 显示 
例如 插入 表单 、 文 本 和 密码 等 表单 元 素 ， 
如 图 10-6 所 示 。 | 










002 全 天 帮 大 7 和 

[€ 6 0 日 fleV//DVSitev/ 林 后 名 站 点 %202/Un $v 国 . 直 tJQ | 
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有 num vr PB 加 HW Aw 4 








~ 
然后 ， 在 【行为 】 面 板 中 单 击 【 添 加 是 ss 一 一 一 
行为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【设置 日 二 国 
文本 】|I 【设置 文本 域 文字 】 选 项 。 在 弹出 
的 【设置 文本 域 文字 】 对 话 框 中 , 单 击 【 文 
本 域 】 选 项 下 拉 按 钮 ， 设 置 文本 域 类 型 。 
同时 ， 在 【新 建文 本 】 文 本 框 中 输入 所 显 
示 的 文本 内 容 ， 单 击 【确定 】 按 钮 即 可 ， 





























如 图 10-7 所 示 。 文本 域 ，|input “textfield” v [ 确定 
pe 新 半 文 本， 于 到 玉宇 而 吾 2 
和 























此 时 ， 用户 可 通过 焉 浏览 器 查看 网 页 全 一 


中 的 内 容 。 当 鼠标 移动 出 表单 时 ， 可 以 看 到 在 【新 建文 本 】 文 本 框 中 所 输入 的 内 容 ， 如 
图 10-8 所 示 。 








02/Un 乡 | v 图- 点 此 按 s5Q | 


3. 设置 状态 栏 文本 


© 全 5 fley//D:/s 
各 寂 豆 ” 作 们 全 人 从 > EE 












加 到 # ~ 因 闻 3% ” .月 登录 千家 


状态 栏 在 浏览 器 窗口 的 底部 ， 用 于 ,> 人! ?es | 


显示 当前 网 页 的 打开 状态 、 和 鼠标 所 滑 过 ”办 : Exama 
的 网 页 对 象 URL 地 址 等 情况 的 一 种 特 ” 3: 
殊 浏 览 器 工具 栏 。 国 基本 

在 Dreamweaver 中 ， 选 择 <body> 





全 > 六 栖 下 看 收 I 县 帮助 [| 惫 一 口 X 


重 尖 你 训 欢 丙 ME 和 Vf 茹 外 后 YW Q100% 4; 





标签 。 然后 , 单 击 【行为 ] 面板 中 的 【 添 
加 行为 了 按钮, 在 弹出 的 菜单 中 选择 【 设 在 了 图 10-8 .效果 显示 
置 文本 】| 【设置 状态 栏 文本 】 选 项 。 在 
弹出 的 【设置 状态 栏 文本 】 对 话 框 中 

















输入 所 需 显 示 的 文本 内 容 ， 并 单 击 【 确 | e552 ss 
定 】 按 钮 ， 如 图 10-9 所 示 。 | 


此 时 ， 在 【行为 】 面 板 中 将 显示 新 








创建 的 行为 信息 。 其 中 ， 该 行为 的 默认 [了 图 10-9 【设置 状态 栏 文本 】 对 话 框 
触发 事件 为 onMouseOver， 为 保证 行为 
的 正常 执行 ， 还 需要 单 击 触 发 事件 ， 在 其 列表 中 选择 onLoad 事件 ， 如 图 10-10 所 示 。 


4. 设置 框架 文本 


设置 框架 文本 行为 主要 用 来 设置 网 
页 框架 结构 中 的 文本 、 显 示 和 内 容 。 

在 包含 框架 的 页 面 中 选择 某 个 对 
象 ， 单 击 【 行 为 】 面 板 中 的 【添加 行为 】 
按钮 ， 在 弹出 的 菜单 中 选择 【设置 文本 】| 
【设置 框架 文本 】 选 项 。 然 后 ， 在 弹出 | 
的 【设置 框架 文本 】 对 话 框 中 ， 设 置 各 2 
选项 , 单 击 【 确 定 】 按 钮 即 可 , 如 图 10-11 
































所 示 。 
在 【设置 框架 文本 】 对 话 框 中 ， 主 
要 包括 下 列 4 种 选项 : = 
口 框架 ”用 于 选择 用 于 显示 设置 | 
文本 的 目标 框架 。 一 一 
口 新 建 HTMI 用 于 设置 在 选 定 全 
框架 中 所 要 显示 内 容 。 








口 获取 当前 HTML 单 击 该 按钮 ， 《了 图 10-1  。 【设置 框 架 文 本 】 对话 杠 
可 以 复制 目标 框架 的 body 部 分 


的 当前 内 容 。 
口 保留 背景 色 启用 该 复 选 框 ， 可 以 保留 原 有 框架 中 的 背景 色 。 





已 次 
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在 Dreamweaver 内 置 的 行为 中 ， 窗 口 信息 行为 主要 包括 弹出 信息 和 打开 浏览 器 窗口 
两 种 窗口 交互 行为 。 


1. 弹出 信息 


弹出 信息 行为 的 作用 是 显示 一 个 包含 指定 文本 信息 的 消息 对 话 框 。 
一 般 信 息 对 话 框 只 要 一 个 【确定 】 
按钮 ， 所 以 使 用 此 行为 可 以 强制 用 户 提 
供 信 息 ， 但 不 能 为 用 户 提供 选择 操作 。 
在 Dreamweaver 中 ,选择 网 页 中 的 
<body> 标 签 。 单 击 【行为 面板 中 的 【 添 
加 行为 按钮 , 在 弹出 的 菜单 中 选择 【 弹 
出 信息 】 选 项 。 然 后 ， 在 弹出 的 【弹出 了 图 10-12 。【 弹 出 信息 】 对 活 杠 
信息 】 对 话 框 中 输入 信息 内 容 ， 并 单 击 一 
【确定 】 按 钮 ， 如 图 10-12 所 示 。 © 区 区 BD Fear 乡 可 图 .点 此 搜 3Q | 
当 用 户 保 存 网 页 并 在 浏览 器 中 打 | 京师 - @mman > 器 # 阳 ， 国 R -加 醒 8 ” 因 轩 坟 ”月 末了 
开 该 网 页 时 ， 系 统 会 自动 弹出 消息 对 话 
框 。 而 在 该 对 话 框 中 ， 将 会 显示 在 【 弹 
出 信息 】 对 话 框 中 所 输入 的 内 容 ， 如 图 
10-13 所 示 。 | 


r 打开 浏览 器 窗口 前 独 你 客 欢 商 态 jis 吴 屎 下 载 书 后 9 加 Qi100% ,4 
在 Dreamweaver 中 , 用 户 可 以 方便 八国 10-13 弹出 信息 效果 显示 
地 为 网 页 各 种 对 象 添加 打开 浏览 器 窗 
口 的 行为 。 




























































































首先 ， 选择 网 页 中 的 <body> 标 签 。 要 显示 的 URL [http: //wwv. baidu com [BR 一 
单 击 【行为 】 面 板 中 的 【添加 行为 按 | ms eine wn 区 训 
钮 ， 在 弹出 的 菜单 中 选择 【打开 浏览 器 口 上 RE 口 入 使用 来 
窗口 】 选 项 。 然后， 在 弹出 的 【打开 浏 EE 口上 本 

窗口 名 称 ; [百度 搜索 





览 器 窗口 】 对 话 框 中 ， 设 置 各 选项 ， 并 
单 击 【确定 】 按 钮 ， 如 图 10-14 所 示 。 
在 【打开 浏览 器 窗口 】 对 话 框 中 ， 在 了 图 10-14 _。【 打 开 浏 览 器 窗口 】 对 话 框 


主要 包括 表 10-3 中 的 一 些 选 项 。 
2 表 10-3 【打开 浏览 器 窗口 】 对 话 框 选项 















用 于 输入 网 页 文档 的 URL 地 址 , 包括 文档 路 径 和 文件 名 , 或 者 单 击 【浏览 】 
按钮 ， 选 择 网 页 文档 





要 显示 的 URL 






续 表 


ER 


以 像素 为 单位 指定 新 窗口 的 宽度 

以 像素 为 单位 指定 新 窗口 的 高 度 

启用 该 复 选 框 ， 可 在 浏览 器 上 显示 后 退 、 前 进 、 主 页 和 刷新 等 标准 按钮 的 
工具 栏 

启用 该 复 选 框 ， 可 在 新 窗口 中 显示 菜单 栏 

属 -工具 启用 该 复 选 框 ， 可 在 新 窗口 中 显示 地 址 栏 

六 启用 该 复 选 框 ， 可 在 页 面 的 内 容 超过 窗口 大 小 时 ， 浏 览 器 会 自动 显示 深 
动 条 
启用 该 复 选 框 ， 可 在 新 窗口 底部 显示 状态 栏 
启用 该 复 选 枉 ， 可 以 显示 调整 窗口 大 小 的 手柄 
用 于 设置 新 窗口 的 名 称 



















已 将 





在 Dreamweaver 内 置 的 行为 中 ， 图 像 信息 行为 主要 包括 交换 图 像 、 恢 复 交 换 图 像 、 
预先 载 入 图 像 3 种 图 像 交 互 行为 。 


1. 交换 图 像 


Dreamweaver 行为 中 的 “交换 图 像 ” 行 
为 比 鼠标 经 过 图 像 的 功能 更 加 强大 。 不 仅 
能 够 制作 鼠标 经 过 图 像 ， 而 且 还 可 以 使 图 
像 交 换 的 行为 响应 任意 一 种 网 页 浏览 器 支 
持 的 事件 ， 包 括 各 种 焦点 事件 、 键 盘 事件 、 
鼠标 事件 等 。 
选择 页 面 中 的 图 像 ， 单 击 【 行 为 】 面 
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板 中 的 【添加 行为 】 按 钮 ， 在 弹出 的 菜单 | 。、、 rman 1 vo| [Wm 有 
中 选择 【交换 图 像 】 选 项 。 然 后 ， 在 弹出 | sw。 Re Ds#]-| nm © 
的 【交换 图 像 】 对 话 框 中 单 击 【设置 原始 | wesa | 


档 为 选项 右 侧 的 【浏览 按钮 , 如 图 10-15 | & oneorwe 











所 示 。 国 此 电 和 
在 弹出 的 【选择 图 像 源 文件 】 对 话 框 | oe ~ 
中 选择 图 像 文件 ， 并 单 击 【 确 定 】 按 钮 ， 
如 图 10-16 所 示 。 Wi | 22 
最 后 ， 在 【交换 图 像 】 对 话 框 中 单 击 | 
【确定 】 按 钮 即 可 。 i 





2. 恢复 交换 图 像 


“恢复 交换 图 像 ” 行 为 是 将 最 后 一 组 交换 的 图 像 恢复 为 未 交换 之 前 的 原状 态 , 它 只 能 
在 应 用 “交换 图 像 ” 行 为 后 才 可 以 使 用 。 
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在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【恢复 交换 图 像 】 
选项 。 然 后 ， 在 弹出 的 【恢复 交换 图 像 】 对 话 框 中 单 击 【 确 定 】 按 钮 即 可 ， 如 图 10-17 
所 示 。 

3. 预先 载 入 图 像 


、 、 将 最 后 一 组 交换 的 图 多 恢复 为 它们 

“预先 载 入 图 像 ” 是 对 在 页 面 打 开 之 处 a 
不 会 立即 显示 的 图 像 ( 例 如 通过 行为 或 向 
JavaScript 换 入 的 图 像 ) 进行 缓存 ， 从 而 缩 
短 显 示 时 间 。 

单 击 【行为 】 面 板 中 的 【添加 行为 】 在 图 10-17 【恢复 交换 图 像 】 对 话 框 
按钮 ， 在 弹出 的 菜单 中 选择 【预先 载 入 图 
像 】 选 项 。 然 后 ， 在 弹出 的 【预先 载 入 图 
像 】 对 话 框 中 单 击 【浏览 〗】 按 钮 ， 选 择 需 ws eg 
要 载 入 的 图 像 文件 。 最 后 ， 单 击 对 话 框 中 
的 【添加 项 】 按 钮 ， 可 以 继续 添加 需要 预 。 四 四 /en weste/ re 和 表征] 
先 载 入 的 图 像 文件 。 设 置 所 有 选项 之 后 ， 
单 击 【 确 定 】 按 钮 即 可 ， 如 图 10-18 所 示 。 在 了 图 10-18 。【 预 先 载 入 图 像 】 对 话 框 









































在 Dreamweaver 内 置 的 行为 中 ， 跳 转 信息 行 为 主要 包括 跳 转 菜 单 、 跳 转 菜 单 开始 、 
转 到 URL 3 种 图 像 交 互 行为 。 


1， 跳 转 荣 单 
“ 跳 转 菜单 ”是 链接 的 一 种 形式 ， 它 是 


























从 表单 中 发 展 而 来 的 。 首 先 ， 将 光标 定位 | ww wa RAR 
在 表单 域 中 ， 单 击 【 行 为 】 面 板 中 的 【 添 | 一 AR 一 

加 行为 】 按 钮 ， 在 弹出 的 列表 中 选择 【 跳 [Ps 本 

转 菜 单 】 选 项 。 然后， 在 弹出 的 【 跳 转 菜 

单 】 对 话 框 中 设置 各 选项 ， 单 击 【确定 】 
按钮 即 可 ， 如 图 10-19 所 示 。 芷 了 图 10-19 .【 跳 转 菜单 】 对 话 框 


在 【 跳 转 菜单 】 对 话 框 中 ， 主 要 包括 下 列 一 些 选项 : 

口 添加 项 单 击 该 按钮 ， 可 以 添加 菜单 项 ， 以 继续 添加 其 余 菜 单项 。 

口 删除 项 单 击 该 按钮 ， 可 以 删除 在 【菜单 项 】〗 列 表 框 中 已 选中 的 菜单 项 .。 

口 在 列表 中 下 移 项 ”选择 【菜单 项 】 列 表 框 中 的 菜单 项 ， 单 击 该 按钮 可 向 下 移动 该 





选项 的 顺序 。 

口 在 列表 中 上 移 项 ”选择 【菜单 项 】〗 列 表 框 中 的 菜单 项 ， 单 击 该 按钮 可 向 上 移动 该 
选项 的 顺序 。 

口 菜单 项 用 于 显示 所 添加 的 菜单 项 。 

口 文本 用 于 设置 菜单 项 中 所 显示 的 文本 。 


口 选择 时 ， 转 到 URL 用 于 设置 所 需 跳 转 的 网 页 地 址 ， 也 可 以 单 击 【 浏 览 〗 按 钮 ， 
来 选择 所 需 链接 的 文件 。 

口 打开 URL 于 用 于 设置 文件 打开 的 位 置 ， 其 中 【 主 窗口 〗 选 项 表示 在 同一 窗口 
中 打开 文件 ， 而 【框架 】〗 选 项 则 表示 在 所 选 框架 中 打开 文件 。 

口 更 改 URL 后 选中 第 一 个 项 目 启用 该 复 选 框 ， 可 以 使 用 菜单 选择 提示 。 


2. 跳 转 菜单 开始 


“ 跳 转 菜单 开始 ”行为 所 产生 的 下 拉 菜 单 比 一 般 的 下 拉 菜 单 多 出 一 个 跳 转 按钮 , 其 跳 
转 按 钮 可 以 为 各 种 形式 。 

在 网 页 中 选择 作为 跳 转 菜单 的 元 素 ， 单 击 
【行为 】 面 板 中 的 【添加 行为 】 按 钮 ， 在 弹出 的 
菜单 中 选择 【 跳 转 菜单 开始 】 选 项 。 然 后 ， 在 
弹出 的 【 跳 转 菜单 开始 】 对 话 框 中 设置 【选择 
跳 转 菜单 】 选 项 ， 单 击 【 确 定 】 按 钮 即 可 ， 如 ”后 图 10-20 。【 跳 转 菜 单 开始 】 对 话 框 
图 10-20 所 示 。 






































3. 转 到 URL 
“ 转 到 URL” 行 为 可 在 当前 窗口 或 指定 的 框架 中 打开 一 个 新 页 面 ， 适 用 于 通过 一 次 
单 击 更 改 两 个 或 多 个 框架 内 容 。 


在 页 面 中 选择 任意 一 个 元 素 ， 单 击 【 行 为 】 面 板 中 的 【添加 行为 】 按 钮 ， 在 弹出 的 
菜单 中 选择 【 转 到 URL】 选项。 然后 ,在 弹出 的 【 转 到 URL】 对 话 框 中 设置 URL 选项 ， 
单 击 【 确 定 】 按 钮 即 可 ， 如 图 10-21 所 示 。 





此 时 ， 在 【行为 】 面 板 中 将 显示 新 添加 的 “ 转 到 URL” 行为 。 用 户 可 以 单 击 事件 名 
称 ， 在 弹出 的 列表 中 选择 onMouseOver (鼠标 经 过 时 ) 选项 ,更改 触发 事件 ， 如 图 10-22 


所 示 。 






























































和 图 10-21 .【 转 到 URL】 对 话 框 太 图 10-22 修改 出 发 事件 











Dreamweaver 除了 为 用 户 内 置 了 窗口 信息 、 图 像 信息 和 跳 转 信息 等 行为 之 外 ， 还 为 
户 内 署 了 一 些 常用 的 网 页 信息 行为 ， 包 括 拖 动 AP 元 素 、 改 变 属 性 、 检 查 表单 等 行为 。 


1. 拖 动 AP 元 素 


“ 拖 动 AP 元 素 ”行为 可 以 让 访问 者 拖 动 绝对 定位 的 〈AP) 元 素 ， 以 达到 相互 访问 
的 目的 。“ 拖 动 AP 元 素 ”行为 主 
要 用 于 创建 平板 游戏 、 滑 块 控件 
和 其 他 可 移动 的 界面 元 素 。 

首先 ， 在 页 面 中 插入 3 张 图 
片 ， 并 在 【代码 】 视 图 中 定义 图 
片 的 div 标签 的 ID。 选 择 最 上 面 
的 图 片 ， 并 选中 apDivl 标签 ， 在 
【属性 】 面 板 中 将 【2 轴 】 设 置 为 
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“1” 如 图 10-23 所 示 。 lemme ee 

使 用 同样 的 方法 ， 设 置 其 他 和 el ows] i 
图 片 的 【Z 轴 】 属 性 值 。 单 击 【 行 二 一 
为 】 面 板 中 的 【添加 行为 】 按 钮 ， y 图 10-23 设置 属性 
在 弹出 的 菜单 中 选择 【 拖 动 AP 元 
素 页 。 并 在 弹出 的 【 拖 动 AP 拖 动 AP 元 素 
元 素 】 对 话 框 中 的 【基本 ]】 选项 a 上村: 
卡 中 ， 设 置 各 选项 ， 如 图 10-24 | 让 于 i mm | 
所 示 . 放下 目标 : 左 : jd 取得 目前 位 置 


靠 齐 殉 离 - 像素 接近 放下 日 标 
在 【基本 】 选 项 卡 中 ， 主 要 
包括 下 列 一 些 选项 : 
口 AP 元 素 用 于 选择 页 面 
中 的 AP 元素。 
口 移动 用 于 设置 AP 元 素 的 移动 方式 ， 其 中 【不 限制 〗】 选 项 适用 于 平板 游戏 和 其 
他 拖 放 游戏 ， 而 “限制 ”选项 则 适用 于 滑 块 控制 和 可 移动 布局 。 
口 放下 目标 ”用 于 设置 相对 于 AP 元 素 起 始 位 置 的 绝对 位 置 。 
口 取得 目前 位 置 ” 单 击 该 按钮 ,可 以 使 用 AP 元 素 的 当前 放置 位 置 自动 填充 文本 框 。 
口 靠 齐 距离 ”用 于 确定 访问 者 必须 将 AP 元 素 拖 到 距离 拖 放 目 标 多 近 时 ， 才 能 使 
AP 元素 靠 齐 到 目标 。 
然后 ， 激 活 【 高 级 】 选 项 卡 ， 定 义 AP 元 素 的 拖 动 控制 点 、 跟 随 触发 动作 、 移 动 触 
发 动作 等 选项 ， 并 单 击 【确定 】 按 钮 ， 如 图 10-25 所 示 。 
在 【高 级 】 选 项 卡 中 ， 主 要 包括 下 列 一 些 选项 : 
口 拖 动 控制 点 ”用 于 设置 元 素 的 拖 动 方式 ， 当 选择 【整个 元 素 】 选 项 时 ， 表 示 可 以 
通过 单 击 AP 元 素 中 的 任意 位 置 来 拖 动 AP 元 素 ; 而 选择 【元 素 内 的 区 域 】 选 项 

















10-24 【基本 】 选 项 卡 








时 ， 则 表示 只 有 单 击 AP 
元 素 的 特定 区 域 才 能 拖 动 
AP 元素, 而 且 设置 左 和 上 
坐标 以 及 拖 动 控制 点 的 宽 
度 和 高 度 值 。 

口 拖 动 时 如 果 AP 元 素 在 
拖 动 时 应 该 移动 到 扒 合 顺 
序 的 最 前 面 ， 则 需要 启用 
【将 元 素 置 于 项 层 〗 复 选 框 ， 并 在 其 后 的 菜单 中 设置 AP 元 素 所 保留 的 堆 司 顺序 
中 的 原 位 置 。 

口 呼叫 JavaScript 用 于 输入 在 拖 动 AP 元 素 时 反复 执行 的 JavaScript 代码 或 函数 。 

口 放下 时 ， 呼 叫 JavaScript 用 于 输入 在 放下 AP 元 素 时 执行 的 JavaScript 代码 或 
示 数 。 

口 只 有 在 靠 齐 时 启用 该 复 选 框 ， 表 示 只 有 在 AP 元 素 到 达 拖 放 目 标 时 才 执 行 


JavaScript。 
2. 改变 属性 


“改变 属性 ”行为 可 更 改 某 个 属性 例如 div 的 背景 颜色 或 表单 的 动作 ) 的 值 。 
在 网 页 中 选择 某 个 元 素 , 单 击 [ 行 为 】 
面板 中 的 【添加 行为 】 按 钮 ， 在 弹出 的 菜 
单 中 选择 【改变 属性 】 选 项 。 然后， 在 弹 
出 的 【改变 属性 】 对 话 框 中 设置 各 选项 ， 
单 击 【 确 定 】 按 钮 即 可 , 如 图 10-26 所 示 。 
其 中 , 在 【改变 属性 】 对 话 框 中 ， 主 
要 包括 下 列 4 种 选项 。 
口 元 素 类 型 ”用 于 选择 需要 修改 属 得 了 图 10-26 。【 改 变 属性 】 对 话 框 
性 的 元 素 类 型 ， 以 显示 该 类 型 的 
所 有 标识 的 元 素 。 
口 元 素 ID 用 来 选择 需要 修改 属性 的 元 素 名 称 。 
口 属性 用 来 设置 改变 元 素 的 属性 值 ， 如 选中 【选择 】 选 项 ， 则 可 以 在 其 下 拉 列 表 
中 选择 属性 值 ; 如 选中 【输入 】〗 选 项 ， 则 可 以 在 文本 框 中 输入 属性 。 
口 新 的 值 用 于 设置 属性 的 新 值 。 


3. 显示 -隐藏 元 素 


“显示 -隐藏 元 素 ” 行 为 可 以 显示 、 隐 藏 或 恢复 一 个 或 多 个 页 面 元 素 的 默认 可 见 性 ， 
主要 用 于 在 用 户 与 页 面 进 行 交 互 时 所 显示 的 信息 。 例 如 ， 当 用 户 将 鼠标 指针 移 到 一 个 图 
像 上 时 ， 可 以 显示 一 个 页 面 元 素 ， 该 页 面 元 素 给 出 有 关 该 图 像 的 基本 信息 。 

在 【行为 】 面 板 中 ， 单 击 【 添 加 行为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【显示 -隐藏 元 素 】 
选项 。 然后， 在 弹出 的 【显示 -隐藏 元 素 】 对 话 框 中 ， 选 择 元 素 ， 单 击 【 显 示 】 或 【隐藏 】 
按钮 ， 并 单 击 【确定 】 按 钮 ， 如 图 10-27 所 示 。 







































































和 图 10-25 【高 级 】 选 项 卡 
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4. 检查 插件 


“检查 插件 ”行为 可 根据 访问 者 是 否 
安装 了 指定 的 插件 这 一 情况 将 它们 转 到 
不 同 的 页 面 。 一 一 一 

在 【行为 】 面板 中 ， 单 击 【添加 行为 】 | sw ea 
按钮 ， 在 弹出 的 菜单 中 选择 【检查 插件 】 | 下 吕 一 一 一 一 一 BM 
选项 。 然后， 在 弹出 的 【检查 插件 】 对 话 
框 中 设置 相应 选项 ， 单 击 【确定 】 按 钮 即 “7 图 10_28 [检查 插件 】 对 
可 ， 如 图 10-28 所 示 。 ee 

其 中 ， 在 【检查 插件 】 对 话 框 中 ， 主 要 包括 下 列 一 些 选项 ; 

口 插件 用 于 设置 检测 插件 类 型 , 选中 【选择 ] 选 项 则 可 以 在 列表 中 选择 内 置 插件 ， 

而 选中 【输入 】 选 项 则 需要 在 文本 框 中 输入 插件 名 称 。 

口 如 果 有 , 转 到 URL 用 于 设置 为 安装 指定 插件 的 访问 者 指定 ( 跳 转 ) 一 个 URL. 

口 否则 , 转 到 URL ”用 于 设置 为 未 安装 指定 插件 的 访问 者 指定 ( 跳 转 ) 一 个 URL. 

口 如 果 无 法 检测 ， 则 始终 转 到 第 一 个 URL 启用 该 选项 ， 当 浏览 器 无 法 检测 插件 

时 则 直接 跳 转 到 上 面 所 设置 的 第 一 个 URL 中 。 


5. 检查 表单 


“检查 表单 ”行为 可 检查 指定 文本 域 的 内 容 以 确保 用 户 输入 的 数据 类 型 正确 ,以 防止 
在 提交 表单 时 出 现 无 效 数据 。 

在 【行为 】 面 板 中 ， 单 击 【 添 加 行 
为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【检查 里 | 
表单 】 选 项 。 然 后 ， 在 弹出 的 【检查 表 
单 】 对 话 框 中 设置 各 项 选项 ， 单 击 【 确 
定 】 按 钮 即 可 ， 如 图 10-29 所 示 。 az © [EO mr 

其 中 ， 在 【检查 表单 】 对 话 框 中 ， O amielt © seh [到 
主要 包括 下 列 一 些 选项 : 

口 域 用 于 显示 页 面 中 的 所 有 文 了 图 10-29 【检查 表单 】 对 话 框 

本 域 ， 便 于 用 户 进行 选择 。 

口 值 启用 【必需 的 】 复 选 框 ， 表 示 浏 览 者 必须 填写 此 项 目 。 

口 可 接受 到 ”用 于 设置 用 户 填写 内 容 的 要 求 ， 当 选中 【任何 东西 】 选 项 ， 表 示 检查 
域 中 包含 数据 ， 数 据 类 型 不 限 ; 选中 【数字 】 选项， 表示 检查 域 中 只 包含 数字 ; 
选中 【电子 邮件 地 址 】 选 项 ， 表 示 检 查 域 中 包含 一 个 @ 符 号 ; 选中 【数字 从 】 先 
项 ， 表 示 检查 域 中 包含 特定 范围 的 数字 。 


10-27 【显示 -隐藏 元 素 】 对 话 框 
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6. 调用 JavaScript 


“调用 JavaScript” 行 为 可 以 在 事件 发 生 时 执行 自 定义 的 函数 或 JavaScript 代码 行 。 

在 【行为 】 面 板 中 ， 单 击 【添加 行为 】 按 钮 ， 在 弹出 的 菜单 中 选择 【调用 JavaScript】 
选项 。 然 后 ， 在 弹出 的 【调用 JavaScript】 对 话 框 中 ， 准 确 地 输入 所 需 执 行 的 JavaScript 
或 函数 名 称 。 

例如 ， 若 要 创建 一 个 【后 退 】 按 钮 ， 可 
以 输入 if (history.length>0){history.back()}。 0 
如 果 用 户 已 将 代码 封装 在 一 个 函数 中 ， 则 只 
需 输入 该 函数 的 名 称 ( 例 如 hGoBack0)。 完 
成 输入 之 后 ， 单 击 【确定 】 按 钮 即 可 ， 如 图 在 7 图 10-30 。[【 调 用 JavaScript】 对 话 框 
10-30 所 示 。 






































10.3 JavaScript 语言 





在 互联 网 中 ， 很 多 网 站 设计 者 都 会 通过 脚本 语言 编写 行为 ， 控 制 网 页 中 的 对 象 ， 实 
现 动 态 的 效果 ， 这 些 动态 效果 可 以 使 网 页 更 加 丰富 多 彩 。 在 制作 动态 效果 时 ， 可 使 用 两 
种 语言 : 一 种 是 JavaScript 语言 ， 另 一 种 则 是 VBScript 语言 。 在 这 两 种 脚本 语言 中 ， 
JavaScript 语言 使 用 最 为 广泛 。 


在 网 页 设计 领域 ， 特 效 发 挥 着 非常 重要 的 作用 。 使 用 网 页 特效 ， 可 以 使 网 页 具备 更 
强 的 交互 性 、 欣 赏 性 ， 也 可 使 网 页 更 加 智能 化 。 在 编写 各 种 特效 时 ， 最 流行 的 脚本 语言 
就 是 JavaScript 脚本 语言 。 


1. JavaScript 简介 


JavaScript 是 一 种 面向 网 络 应 用 的 、 面 向 对 象 编程 的 脚本 语言 ,是 互联 网 中 最 流行 且 
应 用 最 广泛 的 脚本 语言 。 

在 目前 所 有 的 主流 浏览 器 中 , 几乎 都 支持 这 一 脚本 语言 。JavaScript 的 语法 规范 和 语 
义 目前 由 ECMA (欧洲 计算 机 制造 商 协会 ) 国际 维护 ， 当 前 标准 为 ECMA-262。 

最 新 的 JavaScript 标准 为 ECMA-357, 已 被 一 些 JavaScript 衍生 的 语言 使 用 , 但 目前 
尚未 有 浏览 器 支持 。 由 于 JavaScript 的 标准 被 ECMA 国际 维护 ， 因 此 ，JavaScript 脚本 语 
言 又 被 称 作 ECMAScript。 

由 JavaScript 衍生 的 脚本 语言 包括 微软 的 JScript 以 及 Adobe 的 ActionScript 等 。 前 
者 语法 语义 和 JavaScript 非常 相似 , 主要 应 用 于 微软 的 正 浏览 器 及 各 种 服务 器 端 程序 中 。 
后 者 语法 与 JavaScript 有 略微 的 区 别 ， 主 要 应 用 于 Flash 动画 中 。 
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JavaScript 被 设计 来 为 网 页 添加 交互 行为 ， 因 此 其 可 直接 被 嵌入 到 HTML 页 面 中 ， 
被 各 种 浏览 器 解析 ， 无 须 编译 即 可 执行 。 同 时 ，JavaScript 是 一 种 免费 语言 ， 任 何人 无 须 
购买 许可 证 即 可 使 用 。 


2. 与 Java 的 区 别 


JavaScript 与 Java 语言 的 名 称 非常 类 似 ， 很 多 人 都 会 认为 JavaScript 是 Java 的 衍生 
品 ， 类 似 Visual Basic 与 VBScript 的 关系 。 事 实 上 ，JavaScript 与 Java 完全 没有 关系 。 

Java 语言 是 升 阳 计算 机 拥有 版 权 的 一 种 服务 器 端 高 级 语言 ， 而 JavaScript 最 早 由 网 
景 公 司 开发 ， 并 免费 发 布 。JavaScript 的 语法 和 语义 更 接近 于 C 语言 。 


3. JavaScript 的 应 用 


JavaScript 是 一 种 简单 的 面向 对 象 脚本 语言 , 其 使 用 者 无 须 了 解 太 多 的 编程 理论 和 编 

译 方法 ， 即 可 将 代码 嵌入 到 网 页 中 。JavaScript 最 主要 的 用 途 包 括 6 种 。 

口 输出 动态 文本 “JavaScript 可 以 通过 程序 将 文本 内 容 输出 到 网 页 文档 流 中 。 

口 响应 交互 事件 JavaScript 可 以 作为 事件 的 监听 者 ， 获 取 用 户 交互 事件 的 触发 ， 

并 对 其 进行 处 理 ， 实 现 简单 用 户 交 互 。 

口 读 写 XHTML 文档 对 象 ”JavaScript 可 以 通过 DOMK 文档 对 象 模型 ) 读 取 XHTML 
文档 中 的 各 种 对 象 ， 并 写 入 数据 。 

口 验证 数据 JavaScript 可 以 通过 正则 表达 式 等 方法 检测 数据 是 否 符合 要 求 ， 并 根 
据 检测 结果 执行 各 种 命令 。 

口 检测 用 户 端 浏 览 器 ”JavaScript 可 以 通过 简单 的 方法 获取 用 户 端 浏览 器 的 各 种 信 
息 ， 并 返回 相应 的 数据 。 

口 读 写 Cookie JavaScript 可 以 读 写 用 户 本 地 计算 机 的 Cookie， 掌 握 用 户 对 网 站 的 
访问 情况 。 





JavaScript 是 一 种 基于 对 象 的 事件 驱动 , 并 且 具 有 较 强 安全 性 的 脚本 语言 。 它 使 得 信 
息 和 用 户 之 间 不 仅 只 是 一 种 显示 和 浏览 的 关系 ， 而 是 实现 了 一 种 实时 的 、 可 交互 式 的 表 
达能 力 。 

1. JavaScript 在 网 页 中 的 用 法 


JavaScript 脚本 语言 可 以 通过 嵌入 或 导入 的 方法 ， 实 现在 HTML 语言 中 的 功能 ， 详 
细 介 绍 如 下 。 

1) 嵌入 式 

JavaScript 的 脚本 程序 需要 放置 在 <script></scrip 亿 标签 之 间 ， 并 且 为 <scrip 亿 标签 的 
language 属性 设置 值 为 javascript。JavaScript 脚本 程序 可 以 嵌入 到 HTML 语言 中 的 任何 
标签 之 间 ， 代 码 如 下 所 示 。 


<html> 


JavaScript 脚本 程序 还 可 以 在 放置 到 HIML 语言 中 的 任何 标签 之 外 ， 成 为 单独 的 一 
段 程序 ， 代 码 如 下 所 示 。 


2) 导入 式 

如 果 已 经 存在 一 个 JavaScript 源 文 件 〈 以 js 为 扩展 名 )， 则 可 以 采用 导入 的 方式 应 用 
该 程序 。 

例如 ， 在 HIML 网 页 中 导入 名 称 为 example 的 js 文件 ， 代 码 如 下 所 示 。 


2. JavaScript 的 变量 


变量 是 程序 中 数据 的 临时 存放 场所 。 使 用 变量 之 前 首先 进行 声明 ， 在 JavaScript 脚 
本 程序 中 使 用 var 关键 字 来 声明 变量 ， 代 码 如 下 所 示 。 
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var num; 
// 声 明 单个 变量 
Var num, str,boo; 


// 单 个 var 关键 字 声 明 多 个 变量 


Var num=10, str=" 声 明 变 量 ", boo=true; 
// 一 条 语句 中 的 变量 声明 和 初始 化 


</script> 


上 面 程 序 中 的 双 斜 本 〈“/2” 表示 JavaScript 程序 的 注释 部 分 ， 即 从 “//” 开 始 到 行 
尾 的 字符 都 被 忽略 。 








变量 的 名 称 可 以 是 任意 长 度 ， 但 是 创建 合法 的 变量 名 称 应 该 遵循 一 定 的 规则 ， 介 绍 
如 下 : 
口 第 一 个 字符 必须 是 一 个 ASCII 字母 (大 小 写 均 可 )， 或 一 个 下 画 线 (_)。 注 意 第 
一 个 字符 不 能 是 数字 。 
口 后 续 的 字符 必须 是 字母 、 数 字 或 下 画 线 。 
口 变量 名 称 一 定 不 能 是 保留 字 。 


3. JavaScript 的 数据 类 型 


数据 类 型 是 编程 语言 最 基本 的 元 素 。 在 编程 语言 中 ， 数 据 类 型 越 多 ， 说 明 处 理 数据 
的 功能 越 强 。JavaScript 有 5 种 数据 类 型 。 

1) Number 类 型 

该 类 型 也 就 是 数值 数据 类 型 ， 包 括 整 型 和 浮 点 型 。 在 JavaScript 中 ， 整 型 
数 ， 浮 点 型 数 也 就 是 通常 所 说 的 小 数 ， 其 表示 方法 如 表 10-4 所 示 。 


32 表 10-4 ,数值 数据 表示 方法 


说 明 
展 式 相同 ， 如 0、68、100 
在 十 六 进 制 数 中 有 10 个 数字 和 6 个 字母 ， 即 0~~9、A~F 或 a~f。 表 示 
十 六 进 制 时 ， 必 须 以 0x 开头 ， 如 0xF、0x10 
在 八进制 数字 中 共有 8 个 数字 ， 即 0 一 7。 表 示 八 进 制 数 时 ， 必 须 以 0 开 











十 六 进 制 表 示 法 








八进制 表示 法 基辅 他 的 
普通 表示 法 将 浮 点 数 全 部 直接 写 出 来 ， 如 54.658、0.002 
科学 计数 法 通过 了 或 e 来 表示 浮 点 数 ， 如 2.9E+5 或 2.9e+5 








例如 ， 使 用 var 关键 字 声明 Number 类 型 的 变量 ， 代 码 如 下 所 示 。 


<script language="javascript"> 
Var numl = 100; 
// 整 型 数 


Var num2 = 0xA; 





2) String 类 型 

String 类 型 也 称 为 字符 串 型 ， 它 在 JavaScript 中 有 两 种 等 价 的 表示 方法 。 用 单 引号 表 
示 一 个 字符 串 ， 如 'JavaScript'; 还 可 以 用 双 引 号 表示 一 个 字符 串 ， 如 "JavaScript"。 声 明 
String 类 型 的 变量 ， 代 码 如 下 所 示 。 





3) Boolean 类 型 
Boolean 类 型 也 称 为 布尔 型 ， 它 的 数值 只 有 两 个 值 ， 真 用 true 或 1 表示 ; 假 用 false 
或 0 表示。 声明 Boolean 类 型 的 变量 ， 代 码 如 下 所 示 。 





4) Undefined 类 型 


一 个 为 Undefined 类 型 的 值 就 是 指 在 变量 被 创建 后 ， 但 未 给 该 变量 赋值 。 声 明 
Undefined 类 型 的 变量 ， 代 码 如 下 所 示 。 


5) Null 类 型 
Null 类 型 的 值 即 为 空 值 ， 也 就 是 说 该 变量 没有 保存 有 效 的 数值 、 字 符 串 、boolean 
等 。 通 过 给 一 个 变量 赋 null 值 可 以 清除 变量 中 存储 的 内 容 ， 代 码 如 下 所 示 。 
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4. JavaScript 的 运算 符 


JavaScript 具有 全 范围 的 运算 符 ， 包括 算术 运算 符 、 风 辑 运算 符 、 位 运算 符 、 赋 值 运 














算 符 、 比 较 运算 符 、 字 符 串 运算 符 和 特殊 运算 符 。 

1) 算术 运算 符 

算术 运算 符 可 以 将 指定 的 数值 (常量 或 变量 ) 进行 计算 ， 并 返回 一 个 数值 。 算 术 运 
算 符 的 符号 及 描述 如 表 10-5 所 示 。 
32 表 10-5 算术 运算 符 












将 两 个 数 相 加 
将 数值 变量 加 一 ， 并 返回 给 原 变量 
将 两 个 数 相 减 
将 数值 变量 减 一 ， 并 返回 给 原 变量 
将 两 个 数 相 乘 
将 两 个 数 相 除 
求 两 个 数 相 除 的 余数 






















2) 逻辑 运算 符 


逻辑 运算 符 用 Boolean 值 (布尔 逻辑 值 》 作 为 操作 数 ， 并 返回 Boolean 值 。 逻 辑 运 
算 符 的 符号 及 描述 如 表 10-6 所 示 。 


52 表 10-6 _ 逻辑 运 算 符 


如 果 两 个 操作 数 都 是 真 的 话 则 返回 真 ， 否 则 返回 假 
如 果 两 个 操作 数 都 是 假 的 话 则 返回 假 ， 否 则 返回 真 
如 果 其 单一 操作 数 为 真 ， 则 返回 假 ， 否 则 返回 真 





3) 位 运算 符 
位 运算 符 执行 位 运算 时 ， 运 算 符 会 将 操作 数 看 作 一 串 二 进 制 位 〈1 和 0)， 而 不 是 十 
进 制 、 十 六 进 制 或 八进制 数字 。 位 运算 符 的 符号 及 描述 如 表 10-7 所 示 。 
5 表 10-7_ 位 运算 符 







如 果 两 个 操作 数 对 应 位 都 是 1 的 话 ， 则 在 该 位 返回 1 
如 果 两 个 操作 数 对 应 位 只 有 一 个 1 的 话 ， 则 在 该 位 返回 1 














按 位 或 如 果 两 个 操作 数 对 应 位 都 是 0 的 话 ， 则 在 该 位 返回 0 
求 反 反 转 操作 数 的 每 一 位 





将 第 一 操作 数 的 二 进 制 形式 的 每 一 位 向 左 移 位 ， 所 移 位 的 数 











Es 目 由 第 二 操作 数 指定 。 右 面 的 空位 补 零 

ee 将 第 一 操作 数 的 二 进 制 形式 的 每 一 位 向 厂 移 位 ， 所 移 位 的 数 
目 由 第 二 操作 数 指定 。 忽 咯 被 移出 的 位 

i 将 第 一 操作 数 的 二 进 制 形式 的 每 一 位 向 右 移 位 ， 所 移 位 的 数 

逻辑 右 移 >>> 





目 由 第 三 操作 数 指定 。 忽 略 被 移出 的 位 ， 左 面 的 空位 补 零 


4) 赋值 运算 符 

赋值 运算 符 会 将 其 右 侧 操作 数 的 值 赋 给 左 侧 操作 数 。 最 基本 的 赋值 运算 符 是 等 号 
(=)， 它 会 将 右 侧 操作 数 的 值 直 接 赋 给 左 侧 操 作 数 。 赋 值 运算 符 的 符号 及 描述 如 表 10-8 
所 示 。 
52 表 10-8 .赋值 运算 符 

名 称 描 述 

赋值 将 第 二 操作 数 的 值 赋 给 第 一 操作 数 

和 赋值 将 两 个 数 相 加 ， 并 将 和 赋值 给 第 一 操作 数 

差 赋值 将 两 个 数 相 减 ， 并 将 差 赋值 给 第 一 操作 数 

积 赋值 将 两 个 数 相 乘 ， 并 将 积 赋值 给 第 一 操作 数 

商 赋值 将 两 个 数 相 除 ， 并 将 商 赋值 给 第 一 操作 数 

余数 赋值 计算 两 个 数 相 除 的 余数 ， 并 将 余数 赋值 给 第 一 操作 数 

按 位 异 或 赋值 执行 按 位 异 或 ， 并 将 结果 赋值 给 第 一 个 操作 数 

按 位 与 赋值 执行 按 位 与 ， 并 将 结果 赋值 给 第 一 个 操作 数 

按 位 或 赋值 执行 按 位 或 ， 并 将 结果 赋值 给 第 一 个 操作 数 

左 移 赋 值 执行 左 移 ， 并 将 结果 赋值 给 第 一 个 操作 数 

算术 右 移 赋值 执行 算术 右 移 ， 并 将 结果 赋值 给 第 一 个 操作 数 

罗 辑 右 移 赋值 执行 逻辑 右 移 ， 并 将 结果 赋值 给 第 一 个 操作 数 

5) 比较 运算 符 

比较 运算 符 用 来 比较 其 两 边 的 操作 数 ， 并 根据 比较 结果 返回 逻辑 值 。 操 作 数 可 以 是 
数值 或 字符 串 值 ， 如 果 使 用 的 是 字符 串 值 的 话 ， 比 较 是 基于 标准 的 字典 顺序 的 。 比 较 运 
算 符 的 符号 及 描述 如 表 10-9 所 示 。 
32 表 10-9 比较 运算 符 

















如 果 操 作 数 相 等 的 话 ， 则 返回 真 

如 果 操作 数 不 相等 的 话 ， 则 返回 真 

如 果 左 侧 操作 数 大 于 右 侧 操作 数 ， 则 返回 
如 果 左 侧 操作 数 大 于 等 于 右 侧 操作 数 ， 则 返回 真 
如 果 左 侧 操作 数 小 于 右 侧 操作 数 ， 则 返回 
如 果 左 侧 操作 数 小 于 等 于 右 侧 操作 数 ， 则 返回 真 














6) 字符 串 运 算 符 

字符 串 运算 符 可 以 将 两 个 字符 串 连接 在 一 起 ， 并 返回 连接 的 结果 。 字 符 串 运 算 符 的 
符号 及 描述 如 表 10-10 所 示 。 
32 表 10-10 字符 串 运算 符 








字符 串 加 法 连接 两 个 字符 串 
字符 中 连接 贱 信 连接 两 个 字符 趾 ， 并 将 结 采 赋 给 第 一 个 探 作 数 








7) 特殊 运算 符 
特殊 运算 符 是 指 一 些 具有 特殊 含义 的 运算 符 ， 其 符号 及 描述 如 表 10-11 所 示 。 
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32 表 10-11 “特殊 运算 符 


执行 一 个 简单 的 “if…else ”语句 
允许 删除 一 个 对 象 的 属性 或 数组 中 指定 的 元 素 





可 用 于 引用 当前 对 象 的 关键 字 
返回 一 个 字符 串 ， 表 明 未 计算 的 操作 数 类 型 








与 多 数 高 级 编程 语言 类 似 ，JavaScript 也 可 以 通过 语句 控制 代码 执行 的 流程 。 
JavaScript 的 语句 可 以 分 为 两 大 类 ， 即 条 件 语句 、 循 环 语句 等 。 

1. 选择 结构 

选择 结构 通常 用 来 指明 程序 代码 的 多 个 运行 顺序 或 方向 ， 并 为 这 些 顺 序 或 方向 创建 


-个 交叉 点 。 选 择 结构 的 程序 又 可 以 分 为 以 下 4 种 。 
1) 单一 选择 结构 


2 单一 选择 结构 是 指使 用 JavaScript 语句 测试 一 个 条 件 ， 当 条 件 满 足 测试 需求 时 ， 则 
Re 执行 某 些 命令 。 单 一 选择 结构 需要 使 用 站 语句 ， 如 下 所 示 。 
SS 
® var a =2; // 为 变量 a 赋值 为 2 
S var b =1; // 为 变量 b 赋值 为 1 
S TE (> b) // 当 条 件 满足 变量 a 大 于 变量 b 时 ， 则 执行 以 下 语句 块 
版 { 
alert ("a"); // 弹 出 对 话 框 ， 输 出 a 的 值 





2) 双 路 选择 结构 

双 路 选择 结构 是 指 用 JavaScript 测试 一 个 条 件 ， 当 条 件 满足 测试 需求 时 ， 执 行 一 段 
命令 。 当 条 件 不 满足 测试 的 需求 时 ， 则 执行 男 一 段 命 令 。 由 于 程序 在 测试 后 会 出 现 两 个 
选项 ， 故 被 称 作 双 路 选择 结构 。 双 路 选择 结构 需要 使 用 ff…else 语句 ， 如 下 所 示 。 


var a =10; // 为 变量 a 赋值 为 10 
var b =12; // 为 变量 b 赋值 为 12 
if (a>b) // 当 条 件 满足 变量 a 大 于 b 时 ， 则 执行 以 下 语句 块 
{ 
alert (ran // 弹 出 对 话 框 ， 输 出 a 的 值 
} 
Else // 否 则 ， 执 行 以 下 语句 块 
| 
alert ("b"); // 弹 出 对 话 框 ， 输 出 b 的 值 
1 
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3) 内 联 三 元 运算 符 
JavaScript 还 支持 隐 式 的 条 件 格式 ， 这 类 格式 的 条 件 要 在 之 后 使 用 一 个 问号 (?)。 这 
类 条 件 如 需要 指定 两 个 选项 ， 可 在 两 个 选项 之 间 加 冒号 (: ) 隔 开 ， 如 下 所 示 。 





4) 多 路 选择 结构 
之 前 介绍 的 选择 结构 均 是 单 路 或 双 路 选择 结构 ，JavaScript 还 支持 多 路 选择 结构 。 如 
果 需 要 测试 多 个 条 件 ， 可 以 为 程序 添加 switch…case 语句 ， 如 下 所 示 。 





2. 循环 结构 


在 JavaScript 中 ， 还 可 以 使 用 循环 结构 。 循 环 结构 的 特点 是 根据 一 定 的 条 件 多 次 执 
行 ， 直 到 满足 一 定 的 条 件 后 停止 。 例 如 ， 打 印 输出 九 九 乘法 表 的 程序 ， 就 需要 使 用 这 种 
结构 。 

1) 由 计数 器 控制 的 循环 

这 种 循环 需要 用 for 语句 指定 一 个 计数 器 变量 、 一 个 测试 条 件 以 及 更 新 计数 器 的 操 
作 。 在 每 次 循环 的 重复 之 前 ， 都 将 测试 该 条 件 。 如 果 测试 成 功 ， 将 运行 循环 中 的 代码; 
如 果 测 试 不 成 功 ， 则 不 执行 循环 中 的 代码 ， 程 序 继续 运行 紧 跟 在 循环 后 的 第 一 行 代码 ， 
如 下 所 示 。 





在 执行 循环 后 ， 计 算 机 变量 将 在 下 一 次 循环 之 前 被 更 新 。 如 果 循环 条 件 被 满足 ， 则 
循环 将 停止 执行 。 如 果 测试 条 件 不 会 被 满足 ， 则 将 导致 无 限 循环 ， 即 死 循 环 。 在 设计 程 
序 时 ， 应 极力 避免 死 循环 的 发 生 。 











2) 对 对 象 的 每 个 属性 都 进行 操作 
JavaScript 还 提供 了 一 种 特别 的 循环 方式 来 遍历 一 个 对 象 的 所 有 用 户 定义 的 属性 或 
者 一 个 数组 的 所 有 元 素 。for…in 循环 中 的 循环 计数 器 是 一 个 字符 串 ， 而 不 是 数字 。 它 包 
含 当前 属性 的 名 称 或 者 当前 数组 元 素 的 下 标 ， 如 下 所 示 。 





3) 在 循环 开头 测试 表达 式 

如 果 希 望 控制 语句 或 语句 块 的 循环 执行 , 需要 不 只 是 “运行 该 代码 n 次 ”而 是 更 复 
杂 的 规则 ， 则 需要 使 用 while 循环 。while 循环 和 for 循环 相似 ， 其 区 别 在 于 while 循环 
没有 内 置 的 计数 器 或 更 新 表达 式 ， 如 下 所 示 。 





4) 在 循环 的 末尾 测试 表达 式 

在 JavaScript 中 ， 还 有 一 种 do…while 语句 循环 ， 它 与 while 循环 相似 ， 不 同 处 在 于 
它 总 是 至 少 执行 一 次 ， 因 为 它 是 在 循环 的 末尾 检查 条 件 ， 而 不 是 在 开头 。 例 如 ， 上 面 例 
子 的 代码 也 可 以 用 如 下 的 方法 编写 。 





JavaScript 的 一 个 重要 功能 就 是 基于 对 象 功能 。 通 过 基于 对 象 的 程序 设计 ， 可 以 用 更 
直观 、 模 块 化 和 可 重复 使 用 的 方法 进行 程序 开发 。 为 了 能 够 熟练 使 用 JavaScript 编程 ， 
首先 需要 了 解 其 中 一 些 常用 的 对 象 。 


1.String 对 象 


String 对 象 是 JavaScript 最 重要 的 核心 对 象 之 一 ， 所 有 程序 只 要 使 用 字符 串 数据 ,就 
需要 String 对 象 。 创 建 一 个 String 对 象 最 简单 、 有 效 的 方法 就 是 给 一 个 变量 赋予 字符 串 


形式 的 值 ， 代 码 如 下 所 示 。 
<script language="javascript"> 
var str = "创建 一 个 String 对 象 "; 
</script> 


另外 , 还 有 一 种 严格 按照 创建 对 象 的 方法 来 创建 String 对 象 , 需要 使 用 new 关键 字 ， 
代码 如 下 所 示 。 

<script language="JavaScript"> 

Var str = new String ("创建 一 个 String 对 象 "); 

</script> 


String 对 象 的 一 个 重要 属性 为 length， 表示 字符 串 的 字符 个 数 。 该 属性 为 只 读 ,在 程 
序 中 不 可 以 为 其 赋值 。length 属性 的 使 用 方法 如 下 所 示 。 
<script language="JavaSscript"> 


Var str = new String ("String 对 象 的 长 度 ") ; 

var num = str.length; 

// 将 字符 串 的 长 度 赋 给 变量 num， 值 为 11 

</script> 

String 对 象 还 提供 了 一 些 方法 , 以 便 处 理 字符 串 。String 的 主要 方法 如 表 10-12 所 示 。 
表 10-12_ ,String 对象 的 主要 方法 









方 法 功 
charAt(index) 返回 位 于 String 对 象 中 由 index 确定 
indexOf(character) 返回 特定 字符 在 字符 串 中 的 位 置 
substring(start,end) 返回 一 个 字符 串 的 子 串 
toLowerCase() 将 字符 串 中 的 字符 转换 为 小 写 
toUpperCase0) 将 字符 串 中 的 字符 转换 为 大 写 


contact(string) 合并 两 个 字符 串 

fontcolor 设置 <FONT> 标 签 的 color 属性 
fontsize 设置 <FONT> 标 签 的 size 属性 

italics() 创建 一 个 <I></ 人 > 的 HTML 代码 ， 使 字 





2. document 对 象 


document 对 象 即 为 文档 对 象 ， 用 来 描述 当前 窗口 或 指定 窗口 对 象 的 文档 ， 它 包含 文 
档 从 <head> 到 </body> 之 间 的 内 容 。 

document 对 象 的 write0 和 writeln0) 方 法 用 于 向 文档 中 写 入 数据 ， 所 写 入 的 数据 会 以 
标准 文档 HTML 来 处 理 ， 使 用 方法 如 下 所 示 。 

















<script language="javascript"> 
Var str = "write() 和 writeln() 方 法 "; 
document .writeln (str); 

// 将 字符 串 写 入 到 浏览 器 文档 中 


document .write (str); 
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// 将 字符 串 写 入 到 浏览 器 文档 中 


</script> 


提 ” 示 


writeln0 与 write0 的 不 同 点 在 于 ，writeln0 〇 在 写 入 数据 以 后 会 加 一 个 换行 。 但 换 不 换行 要 看 插入 
JavaScript 的 位 置 ， 如 在 <pre> 标 记 中 插入 ， 这 个 换行 将 会 体现 在 文档 中 。 





document 对 象 还 提供 了 open()、close() 和 clear0 方 法 。open0 方 法 用 来 打开 当前 的 网 
页 ， 并 向 这 个 网 页 写 入 指定 类 型 的 数据 流 ; close0 方 法 用 来 关闭 要 写 入 的 网 页 ;clear() 
则 用 来 清除 当前 网 页 。 

例如 , 在 变量 newPage 中 保存 了 一 个 新 网 页 的 HIML 标签 和 文字 ,通过 write0 方 法 
将 该 内 容 写 入 到 当前 网 页 中 ， 然 后 调用 close0 方 法 关闭 输出 流 ， 代 码 如 下 所 示 。 

















<script language="javascript"> 

Var newPage = "<html><head><title>document 对 象 </title></head>"; 
newPage += "<body> 这 是 创建 的 新 网 页 ! </body></html>"; 

// 新 网 页 的 HTML 标签 和 文字 

document .write (newPage); 

// 将 新 网 页 的 HTML 标签 和 文字 写 入 到 浏览 器 文档 中 

document .close(); 

// 关 闭 输出 流 

</script> 


document 对 象 的 许多 属性 是 对 HTML 中 <body> 标 签 属性 的 反映 ， 其 属性 如 表 10-13 
所 示 。 
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333 表 10-13 _document 对 象 的 属性 


属 性 描 述 
alinkColor 以 十 六 进 制 表示 的 alink 链接 颜色 值 





links 包含 网 页 中 所 有 超 链接 的 对 象 数 组 
bgColor 背景 颜色 

feColor 前 景 颜色 

forms 与 页 面 中 每 个 表单 对 应 的 数组 
linkColor 表示 链接 link 的 颜色 





















location 定义 网 页 的 全 部 URL 的 对 象 
title 包含 网 页 标题 的 字符 串 
Teferrer 包含 当前 网 页 URL 的 对 象 
VlinkColor 表示 vlink 链接 的 颜色 





3. window 对 象 





window 对 象 是 浏览 器 显示 内 容 的 主要 容器 。 通 过 该 对 象 的 属性 和 方法 , 可 以 实现 对 
窗口 各 部 分 的 操作 ， 其 主要 属性 和 方法 如 表 10-14 所 示 。 








32 表 10-14 window 对 象 












当前 窗口 用 它 来 
最 顶层 的 窗口 
在 窗口 的 状态 条 上 显示 的 文本 
状态 栏 内 显示 的 默认 值 
显示 一 个 对 话 杠 





区 别 同名 的 窗口 
top 


defaultStatus 
alert() 











open() 打开 具有 指定 文档 的 新 窗口 或 在 指定 的 命名 窗口 内 打开 文档 
close() 关闭 当前 文档 





设置 定时 器 ， 当 定时 器 完成 计数 时 ， 定 时 器 停止 ， 程 序 继续 运行 。 设 定时 间 的 单位 
setTimeout() 为 毫秒 数 


取消 预先 





设置 的 定时 器 


clearTimeout 








利用 open0 和 close() 方 法 可 以 控制 打开 指定 窗口 以 及 窗口 中 包含 的 HIML 文档 。 其 
中 ，open() 方 法 的 形式 如 下 所 示 。 
window.open ("URL", "windowName", "windowStatus") 


参数 URL 为 打开 的 HTML 文档 ;参数 windowName 为 打开 的 文档 指定 一 个 标题 名 
称 ; 参数 windowStatus 指定 窗口 的 各 种 状态 ， 其 包含 的 各 项 内 容 如 表 10-15 所 示 。 


” 表 10-15 ,窗口 参数 及 说 明 


参数 说 明 
toolbar 指定 工具 栏 和 示 
location 指定 地 址 栏 是 否 显示 

directories 指定 是 否 建立 目录 按钮 

status 指定 状态 栏 是 否 显示 

Imenubar 指定 菜单 栏 是 否 显示 

scrollbars 指定 滚动 条 是 否 显示 

Tesizable 指定 窗口 是 否 可 以 更 改 大 小 

width 指定 窗口 的 宽度 

height 指定 窗口 的 












windowStatus 是 一 个 用 过 号 隔 开 参 数 的 列表 。 除 了 width 和 height 需要 指定 数值 外 , 其 他 都 使 用 yes 
或 1 设 成 tme， 使 用 no 或 0 设 成 alse。 

















例如 ， 在 新 窗口 中 打开 名 称 为 testhtml 的 文档 ， 除 设置 高 度 和 宽度 外 ， 其 他 状态 均 


为 不 显示 ， 代 码 如 下 所 示 。 


<script language="javascript"> 

window.open ("test.html", "testName", "toolbar=no, location=no,directories 
=0, status=0,menubar=0, scrollbars=0, resizable=0,width=300,height=250"); 
</script> 


4. Array 对 象 
Array 对 象 即 为 数组 对 象 ， 它 是 一 个 对 象 的 集合 ， 而 且 里 边 的 对 象 可 以 为 不 同类 型 。 
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数组 下 标 可 以 被 认为 是 对 象 的 属性 ， 用 来 表示 其 在 数组 中 的 位 置 。 使 用 new 运算 符 和 
Array0 构 造 器 可 以 生成 一 个 新 的 数组 ， 代 码 如 下 所 示 。 





另外 ， 还 可 以 在 定义 数组 时 直接 初始 化 数据 ， 代 码 如 下 所 示 。 





Array 对 象 的 length 属性 可 以 返回 数组 的 长 度 ， 即 数组 中 包含 元 素 的 个 数 。 它 等 于 
数组 中 最 后 一 个 元 素 的 下 标 加 一 ， 因 此 添加 新 元 素 可 以 用 到 该 属性 ， 代 码 如 下 所 示 。 





5. Date 对 象 


Date 对 象 即 为 日 期 对 象 ， 可 以 用 来 表示 任意 的 日 期 和 时 间 ， 获 取 当 前 系统 日 期 以 及 
计算 两 个 日 期 的 间隔 。 使 用 new 运算 符 创建 一 个 新 的 Date 对 象 ， 代 码 如 下 所 示 。 





上 述 方法 使 myDate 成 为 日 期 对 象 ， 并 且 已 有 初始 值 〈 当 前 时 间 )。 如 果 要 自 定义 初 
始 值 ， 方 法 如 下 所 示 。 


<script language="javascript"> 

Var myDate = new Date(08,7,21); 
//2008 年 8 月 21 日 

Var myDate = new Date('Aug21,2008') 
//2008 年 8 月 21 日 

</script> 


Date 对 象 有 很 多 方法 ， 其 中 ，get 表示 获得 某 个 数值 ， 而 set 表示 设 定 某 个 数值 ， 详 
细 方 法 介绍 如 表 10-16 所 示 。 
ss 表 10-16 _Date 对 象 的 方法 
方 ” 法 说 明 
get/setYear() 返回 /设置 年 份 数 。2000 年 以 前 为 2 位 ,2000( 包 含 ) 以 后 为 4 位 
get/setFullYear() 返回 /设置 完整 的 4 位 年 份 数 
get/setMonth() 返回 /设置 月 份 数 (0 一 11) 
get/setDate0) 返回 /设置 日 期 数 (1~31) 
get/setDay() 返回 /设置 星期 数 (0 一 6) 
get/setHours() 返回 /设置 小 时 数 (0 一 23) 
get/setMinutes() 返回 /设置 分 钟 (0 一 59) 
get/setSeconds() 返回 /设置 秒 数 (0 一 59) 
get/setMilliseconds() | 返回 /设置 毫秒 (0 一 999) 
get/setTime() 返回 /设置 从 1970 年 1 月 1 日 零 时 整 开始 计算 到 日 期 对 象 所 指 的 日 期 的 毫秒 数 
toGMTString0) 以 GMT 格式 表示 日 期 对 象 













站 









= 
口 


Ee 
草 
网 
页 
交 
互 
行 
为 





toUTCString0 以 UTC 格式 表示 日 期 对 象 


6.， Math 对 象 

Math 对 象 即 为 数学 对 象 , 提供 对 数据 的 数学 计算 。 使 用 Math 对 象 的 属性 或 方法 时 ， 
采用 “Math.< 名 >” 这 种 格式 ， 其 属性 和 方法 介绍 如 表 10-17 所 示 。 
32 表 10-17 __Math 对 象 的 属性 和 方法 

属性 与 方法 说 明 

E 回 常数 e ( 约 为 2.718) 


LN2 回 2 的 自然 对 数 


LN10 回 10 的 自然 对 数 


LOG2E 返回 以 2 为 底 e 的 对 数 
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LOG10E 返回 以 10 为 底 e 的 对 数 

PI 返回 x 

SQRT1 2 返回 1/2 的 平方 根 

SQRT2 返回 2 的 平方 根 

abs(x) 返回 x 的 绝对 值 

acos(x) 返回 x 的 反 余弦 值 

asin(x) 返回 x 的 反正 弦 值 

atan(x) 返回 x 的 反正 切 值 

atan2(x,y) 返回 复 平面 内 点 (x，y) 对 应 的 复数 的 幅 角 ， 用 弧度 表示 
ceil(x) 返回 大 于 等 于 x 的 最 小 整数 
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续 表 




















属性 与 方法 说 明 
cos(x) 返回 x 的 余弦 

exp(x) 返回 e 的 x 次 宕 (ev) 

floor(x) 返回 小 于 等 于 x 的 最 大 整数 
log(x) 返回 x 的 自然 对 数 

max(a,b) 返回 a,b 中 较 大 的 数 

min(a,b) 返回 a,b 中 较 小 的 数 

pow(n, m) 返回 n 的 加 次 曙 (nm) 
random() 返回 大 于 0 小 于 1 的 一 个 随机 数 
round(x) 返回 x 四 舍 五 入 后 的 值 

sin(x) 返回 x 的 正弦 

sqrt(x) 返回 x 的 平方 根 

tan(x) 返回 x 的 正切 


练习 : 制作 动画 转动 效果 





在 网 页 中 除了 通过 插入 Flash 动画 及 行为 来 创建 交互 动画 效果 之 外 ,还 可 以 使 用 CSS 
规则 样式 创建 文字 或 图 像 动画 效果 。 例 如 ，CSS 中 的 Animations 功能 则 可 以 定义 多 个 关 


3 键 帧 ， 并 通过 每 个 关键 帧 中 的 标签 的 属性 来 实现 复杂 的 动画 效果 。 在 本 练习 中 ， 将 通过 
二 制作 一 个 企业 首页 ， 来 详细 介绍 Animations 功能 的 含义 和 应 用 ， 如 图 10-31 所 示 。 
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10-31 动画 转动 效果 
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操作 步骤 : 
打开 素材 文档 ， 创 建 页 面 页 头 。 页 头 被 放 在 “top_content”Div 层 中 ， 并 使 用 ul 列表 为 页 头 添加 
导航 条 ， 其 具体 代码 如 下 所 述 。 


为 页 头 添加 CSS 样式 ， 包 括 导航 列表 ul 和 列表 项 | 的 样式 ， 其 具体 代码 如 下 所 述 。 


在 “middle_content”Div 层 中 添加 “intro_text”Div 层 ， 用 于 存放 动画 的 介绍 信息 ， 其 具体 代码 
如 下 所 述 。 


为 intro_text 层 添加 CSS 样式 ， 包 括 层 的 高 度 或 宽度 等 信息 ， 如 图 10-32 所 示 。 
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和 图 10-32 .制作 “intro_text”Div 层 
其 具体 代码 如 下 所 述 。 





在 “container1”Div 层 中 ， 创 建 包含 动画 特效 的 “stage”Div 层 ， 其 具体 代码 如 下 所 述 。 





为 container1 层 和 stage 层 添加 样式 ， 其 具体 代码 如 下 所 述 。 





width: 700px; 

height: 380px; 

-Webkit-perspective: 800; 
-Webkit-perspective-origin: 50% 225px; 


上 
#shape { 
position: relative; top: 100px; 
margin: 0 auto; 
height: 200px; 
width: 200px; 
—webkit-transform-style: preserve-3d; 
| 


为 plane 添加 样式 ， 该 层 主要 用 于 设置 动画 中 的 过 渡 效 果 ， 其 具体 代码 如 下 所 述 。 


-Plane { 
Position: absolute; 
height: 200px; 
width: 200px; 
border: lpx solid white; 
—webkit-border-radius: 12px; 
—webkit-box-sizing: border-box; 
text-align: center; 
font-family: Times, serif; 
font-size: 124pt;color: black; 
background=color: rgba(255, 2557 255, 0.637 
—webkit-transition: -webkit-transform 2s， 

opacity 2s; 

-webkit-backface-visibility: hidden;} 


中 文 时 间 脚 





在 制作 网 站 时 ， 通 常 需 要 在 网 站 的 后 台 页 中 插入 了 显示 当前 中 文 时 间 信息 的 脚本 。 
在 本 练习 中 ， 将 运用 HTML 语言 ， 使 用 时 间 (Date) 对 象 功能 ， 并 通过 JavaScript 函数 
为 网 站 后 台 插入 显示 当前 中 文 时 间 的 脚本 ， 如 图 10-33 所 示 。 
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操作 步骤 : 

打开 素材 网 页 ， 新 建 JavaScript 网 页 文档 并 保存 该 文档 至 scripts 文件 夹 内 。 在 JavaScript 文档 
中 ,创建 函数 clock()， 用 来 获取 并 显示 系统 时 间 。 函 数 内 容 是 使 用 Date() 系 统 函 数 获取 完整 的 系 
统 时 间 ， 其 具体 代码 如 下 所 述 。 


在 clock() 函 数 中 使 用 getFullYear()、getMonth()、getDate() 等 函数 获取 系统 时 间 中 的 年 、 月 、 日 
等 ， 并 使 用 innerHTML 函数 将 获取 的 数据 在 id 为 topbtm 的 Div 标签 中 显示 ， 其 具体 代码 如 下 


再 创建 一 个 格式 化 时 间 的 函数 。 该 函数 有 两 个 参数 ， 一 个 是 转 过 来 的 时 间 ， 例 如 年 或 者 日 期 等 数 


值 ; 另 一 个 是 表示 第 一 个 参数 的 类 型 ， 例 如 年 、 月 等 ， 其 具体 代码 如 下 所 述 。 


在 格式 化 时 间 函 数 中 ， 对 获取 的 系统 时 间 进 行 格式 化 处 理 ， 并 进行 返回 ， 其 具体 代码 如 下 所 述 。 





} 
if (numtype=="hour"| |numtype=="minute"| |numtype=="second"){ 
if (num<10)1{ 
return "0"+num7 
jelset 
return num+" "7 


下 
使 用 setinterval() 函 数 来 设置 每 秒 获取 一 次 系统 时 间 ， 其 具体 代码 如 下 所 述 。 


setIinterval (clock, 1000); 


打开 topFrame 框架 所 连接 的 CSS 文件 ， 找 到 ID 为 topbtm 的 Div 标签 的 CSS 样式 ， 并 在 其 中 
定义 其 文本 颜色 、 文 本 大 小 、 行 高 和 首 行 缩 进 等 属性 ， 其 具体 代码 如 下 所 述 。 


#topbtm{ 
height:27px; 


background-image:url(../images/topbotm.jpg); 


background-repeat :repeat-x; 
border:1lpx solid black; 
color:#777; 
font-size:12px; 
line-height:27px; 
text-indent :2em; 

} 


10.6 忆 - 考 与 练习 
一 、 填 空 题 
1. _ 是 用 来 动态 响应 用 户 操作 、 改 


变 当前 页 面 效果 或 者 执行 特定 任务 的 一 种 方法 ， 
可 以 使 访问 者 与 网 页 之 间 产 生 一 种 交互 。 

2. Dreamweaver 行为 将 代码 放置 
到 文档 中 ， 这 样 访问 者 就 可 以 通过 多 种 方式 更 改 
网 页 ， 或 者 启动 某 些 任务 。 


3. _ 是 浏览 器 生成 的 消息 ， 它 指示 该 
页 的 访问 者 已 执行 了 某 种 操作 。 
4. 是 一 段 预先 编写 的 JavaScript 代 





码 ， 可 用 于 执行 诸如 打开 浏览 器 窗口 、 显 示 或 隐 
藏 AP 元 素 、 播 放声 音 或 停止 播放 Adobe 
Shockwave 影片 等 任务 。 

5. 是 网 页 中 包含 内 容 的 标签 的 统 
称 ， 典 型 的 容器 包括 各 种 定义 人 D 的 表格 、 层 、 
框架 、 段 落 等 块 状 标签 。 








6. 是 一 种 面向 网 络 应 用 的 、 面 向 对 
象 编程 的 脚本 语言 ， 是 互联 网 中 最 流行 且 应 用 最 
广泛 的 脚本 语言 。 
二 、 选 择 题 
We ”是 链接 的 一 种 形式 ， 它 是 从 表 
单 中 发 展 而 来 的 。 
A. 跳 转 菜 单 ”B. 跳 转 开始 菜单 
C. 框架 文字 D. 转 到 URL 
2. 用 户 可 以 在 【 】 面 板 中 ， 先 指定 


一 个 动作 ， 然 后 指定 触发 该 动作 的 事件 ， 以 此 将 
行为 添加 到 页 面 中 。 
A. 插件 B. 行为 
C. 属性 D. 资源 
3 . JavaScript 的 脚本 程序 需要 放置 在 
<scripf></scrip 人 标签 之 间 , 并 且 为 <scrip 人 > 标签 的 
language 属性 设置 值 为 





已 次 


4 
草 
网 
页 
交 
忆 
行 
为 





和 
教 
人 
局 
® 


(对 0z0z 





A. HIML 也 .CSS 
C. javascript DEEP 
4. 类 型 也 称 为 布尔 型 ， 它 的 数值 只 
有 两 个 值 : 真 用 true 或 1 表示 ; 假 用 false 或 0 
表示 。 
A. Undefined B. Boolean 
C. Nall D. String 
5. 是 指 用 JavaScript 测试 一 个 条 件 ， 
当 条 件 满足 测试 需求 时 ， 执 行 一 段 命令 。 
A. 单一 选择 结构 
B. 多 路 选择 结构 
C. 双 路 选择 结构 
D. 内 联 三 元 运算 符 
6. 对 象 是 JavaScript 最 重要 的 核心 
对 象 之 一 ， 所 有 程序 只 要 使 用 字符 串 数据 ， 就 需 
要 String 对 象 。 
A. String 
C. window 


B. document 
D. Aray 


三 、 问 答题 


1. 什么 是 网 页 行为 ? 

2. 如 何 设置 弹出 窗口 信息 ? 
3. 如 何 设置 跳 转 信 息 ? 

4. 什么 是 JavaScript 语言 ? 


四 、 上 机 练习 


1. 制作 产品 详细 介绍 

在 本 练习 中 ， 将 运用 “网 页 行为 ”功能 ， 制 
作 一 个 产品 详细 介绍 网 页 ， 如 图 10-34 所 示 。 首 
先 打开 素材 文件 ， 选 择 【 更 多 详情 】 图 像 ， 单 击 
【添加 行为 了 按钮 , 选择 【打开 浏览 器 窗口 ] 选 项 。 
然后 ， 在 弹出 的 【打开 浏览 器 窗口 】 对 话 框 中 ， 
设置 相应 的 选项 ， 单 击 【 确 定 】 按 钮 。 最 后 ， 使 
用 同样 的 方法 ， 分 别 为 其 他 【更 多 详情 】 图 像 添 
加 交互 行为 。 
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入 图 10-34 产品 详细 介绍 网 页 


2. 制作 拼图 游戏 

在 本 练习 中 ， 将 运用 “网 页 行为 ”功能 ， 制 
作 一 个 拼图 游戏 网 页 ， 如 图 10-35 所 示 。 首 先 设 
置 页 面 属性 ， 添 加 页 面 背景 。 然 后 ， 在 网 页 中 插 
入 一 个 名 为 “apDiv1” 的 Div 层 ， 并 新 建 该 层 的 
CSS 样式 。 使 用 同样 方法 ， 分 别 插入 其 他 8 个 类 
似 的 Div 层 和 1 个 外 边框 Div 层 ， 并 分 别 创建 其 
CSS 规则 。 最 后 ， 单 击 【添加 行为 】 按 钮 ， 选 择 
【 拖 动 AP 元 素 】 选 项 ,在 弹出 的 对 话 框 中 设置 相 
应 的 选项 即 可 。 








芷 了 图 10-35 拼图 游戏 网 页 









ASP 及 数据 库 基础 


11.1 ASP 基础 
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用 任何 文本 编辑 器 打开 它 , ASP 程序 文件 中 可 以 包含 纯 文本 、XHTML 标记 以 及 脚本 命令 。 
一 个 简单 的 ASP 文件 可 以 包括 3 个 部 分 。 
口 普通 的 XHTML 文件 ， 也 就 是 普通 的 Web 的 页 面 内 容 。 
口 服务 器 端的 Script 程序 代码 ， 位 于 <%…%> 内 的 程序 代码 。 
口 客户 端的 Script 程序 代码 ， 位 于 <script>…</script> 内 的 程序 代码 。 
ASP 文件 的 约定 如 下 。 
口 所 有 的 Script 程序 代码 均 须 放 在 <% 与 %> 符 号 之 间 。 
口 在 ASP 里 面 ，VBScript 是 默认 的 脚本 语言 ， 如 果 要 在 ASP 网 页 中 使 用 其 他 的 脚 
本 语言 ， 可 以 用 以 下 方法 在 文件 开头 申明 : 





寻 

标 在 编写 ASP 代码 时 要 注意 以 下 几 点 。 

孝 口 ASP 代码 中 ， 字 母 不 分 大 小 写 ， 不 过 使 用 小 写 更 方便 阅读 。 

反 口 ASP 代码 中 ,所 有 标点 符号 均 为 英文 状态 下 所 输入 的 标点 符号 ， 这 点 请 大 家 一 定 


要 注意 。 当 然 ， 字 符 串 中 的 中 文 标点 符号 除外 ， 例 如 : 





序 设计 技术 单 易学 的 语 


代码 里 的 冒号 即 是 中 文 标点 符号 。 
口 ASP 代码 中 ,可 以 在 适当 位 置 加 入 注释 语句 ， 这样 方便 程序 的 阅读 。 注 释 语句 一 
般 由 “” 开始 ， 例 如 : 


D 
oo 
D 
© 
DS 





其 中 的 “' 输出 显示 ” 即 是 注释 语句 ， 运 行 时 ASP 不 执行 该 句 。 
口 ASP 代码 中 ， 定 界 符 “<%” 和 “9%>” 的 位 置 比较 随便 ， 可 以 与 ASP 语句 放 在 


一 行 ， 也 可 以 单独 成 行 。 例 如 : 





! Mr .wan 


也 可 以 写成 : 





口 ASP 代码 中 ,不 能 将 一 条 语句 分 行 写 , 也 不 能 将 多 条 语句 写 在 一 行内 。 例如 下 面 
的 写法 都 是 错误 的 。 





ASP 中 ， 除 了 脚本 语言 中 的 指令 外 ， 还 提供 了 一 些 数 据 输 入 输出 、 处 理 的 指令 ， 主 
要 有 输出 指令 、 处 理 指 令 和 包含 指令 (#include)。 


1. ASP 输出 指令 


ASP 的 输出 指令 <%=expression %> 显 示 表 达 式 的 值 ， 这 个 输出 指令 等 同 于 使 用 
Response.Write 显示 信息 。 例 如 ， 输 出 表达 式 <%=sport%> 将 文字 sport( 变 量 当 前 的 值 ) 
传送 到 浏览 器 。 


2. 处 理 指令 


ASP 处 理 指令 <% @ keyword%> 将 有 关 如 何 处 理 .asp 文件 的 信息 发 送 给 IS (注意 在 
@ 和 keyword 之 间 必 须 有 一 个 空格 )。 在 IIS 4.0 中 ，Active Server Pages(ASP) 支 持 以 下 5 
条 @ 指 令 。 

1) @ CODEPAGE 指令 

可 以 使 用 @ CODEPAGE 指令 为 .asp 文件 设置 代码 页 。 代码 页 是 一 个 字符 集 , 包括 数 
字 、 标 点 符号 及 其 他 字符 。 不 同 的 语言 用 不 同 的 代码 页 。 例 如 ，ANSI 代码 页 1252 为 美 
国 英语 和 大 多 欧洲 语言 所 使 用 ， 而 OEM 代码 页 932 为 日 本 汉字 所 使 用 。 

代码 页 可 表示 为 一 个 字符 到 单字 节 值 或 多 字 节 值 的 映射 表 。 许 多 代码 页 都 共享 在 
0x00 一 0x7F 之 间 的 ASCII 字符 集 。@ CODEPAGE 指令 的 语法 格式 如 下 所 示 。 


<%@ CODEPRGE=codepages> 
参数 codepage 为 无 符号 整数 ， 代 表 正 在 运行 ASP 脚本 引擎 系统 的 有 效 代码 页 。 


2) @ ENABLESESSIONSTATE 指令 

可 以 使 用 @ ENABLESESSIONSTATE 指令 关闭 网 页 会 话 跟踪 。 会 话 跟踪 维护 由 单 
个 客户 端 发 布 的 一 组 请 求 信息 。 如 果 网 页 不 依赖 会 话 信息 ， 则 关闭 会 话 跟踪 可 减少 HS 
处 理 脚本 的 时 间 ， 其 语法 格式 如 下 所 示 。 

<%@ ENABLESESSIONSSTATE=True|False %> 
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3) @LANGUAGE 指令 

用 户 可 以 用 @ LANGUAGE 指令 设置 用 于 解释 脚本 中 的 命令 语言 ， 可 以 将 脚本 语言 
设置 为 任何 一 种 已 安装 在 IS 中 的 脚本 引擎 。 默 认 设 置 为 VBScript。 因 此 ， 如 果 用 户 在 
脚本 中 未 包括 @ LANGUAGE， 脚 本 将 由 VBScript 引擎 解释 。 其 语法 格式 如 下 所 示 。 


<%@ LANGUAGE=scriptengine %> 


其 中 ， 参 数 scriptengine 指 编译 脚本 的 脚本 引擎 。IIS 装 有 两 个 脚本 引擎 ，VBScript 
和 JScript。 





4) @LCID 指令 

可 以 使 用 @ LCID 指令 为 脚本 设置 现场 标识 (LCID)。LCID 的 数据 类 型 是 DWORD， 
低 字 为 语言 标识 ， 高 字 保留 。LCID 标识 以 国际 标准 的 数字 缩写 表示 。LCID 有 唯一 标识 
已 安装 的 系统 定义 现场 所 需 的 组 件 。 有 两 个 预定 义 LCID 值 ，LOCALE SYSTEM _ 
DEFAULT 是 系统 默认 现场 ， LOCALE USER_DEFAULT 是 当前 用 户 现场 ， 其 语法 格式 
如 下 所 示 。 


<%@ LCID=localeidentifier %> 


其 中 ， 参 数 localeidentifer 指 有 效 的 现场 标识 。 

5) @ TRANSACTION 指令 

可 以 使 用 @ TRANSACTION 指令 指出 脚本 应 被 当 作 事 务 来 处 理 。 若 脚本 被 当 作 事务 
处 理 时 ，Microsoft Transaction Server (MTS) 将 创建 一 个 事务 来 协调 资源 的 更 新 ， 其 语 
法 格式 如 下 所 示 。 


<%@ TRANSACTION=value %> 
其 中 ， 参 数 value 指 事 务 支持 类 型 的 字符 串 ， 其 值 如 表 11-1 所 示 。 
3 表 11-1 事务 支持 类 型 





3. 应 用 #include 包含 指令 
#include 指令 使 用 非常 广泛 ， 能 最 大 限度 地 实现 代码 重用 。 当 执行 到 该 指令 时 ， 会 


把 此 nclude 指令 所 包含 的 内 容 插 到 当前 ASP 页 内 一 起 执行 ， 这 也 就 意味 着 调用 函数 、 过 
程 等 可 以 由 它 来 实现 。#include 的 语法 如 下 。 


<!-- include VIRTUALI|FILE="filename"——> 


口 VIRTUAL 代表 使 用 一 个 虚拟 的 相对 或 绝对 路 径 ， 例 如 ， 一 个 文件 名 为 
Myfirstfile。inc， 位 于 虚拟 路 径 / MyDirectory 下 。 





<!--#include VIRTUAL=" /MyDirectory /Myfirstfile. inc"--> 
<!—-#include VIRTUAL="../../MyOther/Myfirstfile.inc"--> 


口 FILE 代表 相对 或 全 路 径 与 文件 名 的 组 合 ， 相 对 路 径 以 一 个 目录 开始 并 包含 一 
个 文件 名 。 


<!--#include FILE= "Mysecondfile.inc"--> 


使 用 include 文件 的 优点 如 下 。 
口 可 以 使 网 页 有 一 个 连贯 一 致 的 外 观 ， 如 菜单 。 若 在 每 一 个 网 页 上 使 用 菜单 ， 通 常 
当 菜 单 内 容 变化 时 ， 必 须 修 改 每 一 页 。 在 include 文件 里 并 没有 HTML 的 起 点 或 
是 终点 标识 ， 例 如 <html> 或 <body>。 这 是 因为 当 #include 语句 被 处 理 的 时 候 ， 这 
个 include 的 文件 内 容 会 “融入 ”调用 文件 中 ， 而 成 为 它 内 容 的 一 部 分 。 一 般 来 
说 ， 这 部 分 的 内 容 是 在 这 个 调用 文件 中 间 的 某 一 段落 ， 所 以 没有 起 点 或 是 终点 的 
标识 。 运 用 include 文件 ， 不 论 是 菜单 或 是 任何 共同 的 XHTML 内 容 的 变动 ， 只 
需 修改 相关 的 include 文件 即 可 ， 而 不 用 去 改动 许多 文件 。 
口 include 文件 可 以 包括 一 组 被 大 多 数 ASP 文件 所 使 用 的 函数 。include 文件 是 放置 
这 些 函 数 最 理想 的 地 方 。 例 如 ， 必 须 确认 每 个 用 户 所 输入 的 资料 都 是 合法 字符 ， 
在 这 种 情况 下 ， 很 多 页 面 都 需要 使 用 到 相同 的 判断 合法 字符 的 函数 。 但 是 利用 
include 文件 ， 只 需要 把 相同 的 程序 包含 在 每 个 文件 里 就 可 以 了 。 
被 包含 的 XHTML 文件 ， 可 以 包含 任何 XHTML 标识 ， 例 如 图 片 与 超 链接 。 被 包含 
的 #include 文件 ， 还 可 再 包含 其 他 被 包含 的 #include 文件 。 但 是 ， 这 样 的 包含 不 应 造成 循 
环 。 例 如 ，First.asp 包含 Second.inc， 则 Second.Inc 不 能 再 包含 Firstasp。 一 个 文件 也 不 
能 包含 它 自己 ， 否 则 的 话 ， 程 序 将 产生 错误 ， 并 停止 执行 ASP 文件 。 
ASP 包含 文件 会 在 执行 脚本 命令 之 前 被 载 入 ， 因 此 不 能 使 用 脚本 去 创建 包含 文件 。 
例如 ， 下 面 脚本 的 调用 将 失败 。 
<! -调用 失败 的 脚本 --> 
<%name= ("hcadcrg. inc")%> 
<!--#include file="<%name%>"--> 


= 四 
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很 多 ASP 初学 者 都 有 可 能 在 双 引 号 、 单 引号 以 及 & 号 上 迷失 方向 。 最 关键 的 是 不 理 
解 这 3 类 符号 的 意思 ， 当 然 也 就 不 能 很 好 地 掌握 它们 的 用 法 了 。 以 下 是 作者 对 3 类 符号 
的 看 法 ， 介 绍 如 下 。 








1. 双 引 号 " 
在 ASP 中 处 在 双 引 号 中 的 可 以 是 任意 的 字符 、 字 符 串 、XHTML 代码 。 例 如 : 


在 上 述 代码 中 ， 产 生 的 页 面 效果 分 别 是 : 默认 文字 和 加 粗 文 字 “cnbruce here”。 
下 面 再 想 想 ， 如 果 要 在 输出 的 页 面 文字 上 加 一 颜色 效果 该 怎么 办 ? 大 家 都 知道 ， 一 
般 文字 颜色 的 格式 是 这 样 写 的 : 


而 response.write 格式 是 这 样 的 : 


如 果 要 将 上 面 文字 颜色 的 代码 放 到 response.write 中 ， 就 会 发 现 write 方法 中 的 双 引 
号 和 color 中 的 双 引 号 形成 嵌 套 效果 ， 如 下 所 示 。 





调试 结果 可 想 而 知 : 不 容 乐 观 。 因 为 color 的 前 引号 和 write 的 前 引号 形成 匹配 ， 内 
容 为 <font color=; 同样 color 的 后 引号 也 就 和 write 的 后 引号 匹配 了 ， 内 容 为 : 
>cnbruce</font>。 最 终结 果 是 : 中 间 的 #0000 企 被 独立 了 出 来 ， 不 被 浏览 器 识别 。 

所 以 为 了 结果 正确 ,可 以 将 #0000 企 当成 字符 串 放 在 双 引 号 里 面 ， 然 后 该 字符 串 与 前 
字符 串 <font color= 和 后 字符 串 >cnbruce</font> 中 间 的 连接 就 采用 及 号， 最 后 结果 如 下 : 





2. 单 引号 " 


正如 学 习 语 文 课 一 样 ， 继 续 放 在 双 引 号 中 的 引号 可 以 采用 单 引号 。 
那么 上 面 输入 语句 response.write("<font color="#0000ff'>cnbrmce</font>") 中 的 
#0000 任 就 可 以 将 其 双 引 号 变 为 单 引号 ， 结 果 如 下 : 


3. 连接 字符 & 


ASP 中 必 号 的 主要 作用 是 用 来 连接 的 ， 包 括 字符 串 -字符 串 、 字 符 串 -变量 、 变 量 - 变 
量 等 混合 连接 。 
例如 下 面 语句 : 





在 上 述 代码 中 ， 需 要 注意 的 是 : color 的 单 引 号 中 又 采用 了 双 引 号 。 

首先 是 定义 了 一 个 变量 mycolor， 按 照 原则 ， 变 量 放 在 response.write 里 面 是 不 需要 
加 双 引 号 的 ， 因 为 加 了 双 引 号 就 表示 是 字符 串 ， 而 非 变 量 。 如 果 使 用 response.write 要 输 
出 变量 时 ， 可 以 直接 这 样 写 : 


response.write (mycolor) 


但 是 ， 如 果 变 量 一 定 要 放 在 双 引 号 中 《比如 上 面 程序 是 放 在 单 引 中 )， 那 具体 的 
response.write 又 该 如 何 书写 呢 ? 将 ASP 中 的 变量 添加 左右 的 "& 连接 符 ， 效 果 即 为 ; 








response.write(" "gmycolorg" ") 
分 析 上 述 代码 可 以 看 出 ， 其 实 就 是 前 一 空 字符 串 连接 mycolor 变量 再 连接 后 一 字 
符 串 。 





11.2 ASP 编程 基础 


VBScript (Microsoft Visual Basic Scripting Edition) 是 基于 Microsoft 公司 的 Visual 
Basic 语言 ， 使 用 VBScript 可 以 编写 服务 器 端 脚本 ， 也 可 以 编写 客户 端 脚本 。 服 务 器 端 
脚本 在 Web 服务 器 上 运行 ， 由 服务 器 根据 脚本 的 运行 结果 生成 相应 的 HIML 页 面 发 送 
到 客户 端 浏 览 器 中 显示 ; 客户 端 脚 本 由 浏览 器 解释 运行 。 


语法 是 语言 表达 的 规则 ， 计 算 机 语言 同样 需要 根据 该 语言 语法 的 规则 来 进行 编程 。 
F 面 将 介绍 一 下 ASP 脚本 语言 的 语法 规则 。 

1. 常量 

常量 是 一 般 在 整个 代码 的 过 程 中 ， 处 于 恒定 、 不 可 改变 的 值 。 在 自然 界 中 ， 常 量 有 
很 多 种 ， 如 圆周 率 的 值 3.14 等 。 在 编写 程序 的 过 程 中 ， 如 果 遇 到 一 些 数据 在 整个 过 程 
中 不 允许 改变 ， 则 可 以 将 其 声明 为 常量 。 声 明 常 量 的 代码 如 下 ， 





Const name = Value 


其 中 ，Const 语句 的 参数 功能 如 下 。 
口 name 表示 符号 常量 名 ， 一 般 使 用 大 写字 母 表示 。 
口 Value 该 参数 表示 数值 常数 、 字 符 串 常数 以 及 由 运算 符 组 成 的 表达 式 。 
例如 ， 声 明 常量 Conpi 代码 如 下 : 

Const Conpi=3.14 

"声明 一 个 常量 Conpi 的 值 为 3.14 

在 声明 常量 时 ， 为 防止 常量 和 变量 的 混淆 ,通常 在 常量 前 加 vb 或 con 的 前 级 。 除 了 
户 自 定 义 的 常量 外 ，VBScript 还 有 一 些 内 置 的 常量 供用 户 调用 ,例如 ，vbBlack， 其 值 
为 &h00， 用 于 表示 颜色 。 
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2. 变量 


变量 是 一 种 使 用 方便 的 占 位 符 ， 用 于 引用 计算 机 内 存 地 址 ， 该 地 址 可 以 存储 脚本 运 
行 时 可 更 改 的 程序 信息 。 例 如 ， 可 以 创建 一 个 名 为 ClickCount 的 变量 来 存储 用 户 单 击 
Web 页 面 上 某 个 对 象 的 次 数 。 使 用 变量 并 不 需要 了 解 变量 在 计算 机 内 存 中 的 地 址 ， 只 要 
通过 变量 名 引用 变量 就 可 以 查看 或 更 改变 量 的 值 .在 VBScript 中 只 有 一 个 基本 数据 类 型 ， 
即 Variant， 因 此 所 有 变量 的 数据 类 型 都 是 Variant。 

声明 变量 的 一 种 方式 是 使 用 Dim 语句 、Public 语句 或 Private 语句 在 脚本 中 显 式 声 
明 变量 。 例 如 : 


Dim DegreesFahrenheit 
声明 多 个 变量 时 ， 使 用 逗号 分 隔 变量 。 例 如 : 
Dim Top，Bottom，Left，Right 


另 一 种 方式 是 通过 直接 在 脚本 中 使 用 变量 名 这 一 简单 方式 隐 式 声明 变量 。 这 通常 不 
是 一 个 好 习惯 , 因为 这 样 有 时 会 由 于 变量 名 被 拼 错 而 导致 在 运行 脚本 时 出 现 意外 的 结果 。 
因此 , 最 好 使 用 Option Explicit 语句 显 式 声明 所 有 变量 , 并 将 其 作为 脚本 的 第 一 条 语句 。 
变量 命名 必须 遵循 VBScript 的 标准 命名 规则 。 

口 第 一 个 字符 必须 是 字母 。 

口 不 能 包含 嵌入 的 句点 。 

口 长 度 不 能 超过 255 个 字符 。 

口 在 被 声明 的 作用 域内 必须 唯一 。 

创建 如 下 形式 的 表达 式 给 变量 赋值 : 变量 在 表达 式 左 边 ， 要 赋 的 值 在 表达 式 右边 。 
例如 : 

Dim B 

B= 200 


3. 数据 类 型 


VBScript 脚本 语言 和 其 他 脚本 语言 一 样 ， 其 数据 是 按照 数据 类 型 分 类 运算 的 。 在 运 
算 的 过 程 中 ， 必 须 设置 运算 符 。VBScript 的 运算 表达 式 通常 由 变量 、 常 量 、 函 数 ， 以 及 
运算 符 等 组 成 。 

VBScript 的 数据 类 型 即 Variant， 是 一 种 特殊 的 数据 类 型 ， 其 根据 使 用 方式 的 不 同 ， 
可 以 包含 各 种 信息 。 通 常 Variant 数据 类 型 可 以 分 为 两 大 类 ， 即 数字 类 型 和 字符 串 类 型 。 
在 声明 数字 类 型 的 数据 时 ， 不 需要 做 任何 特殊 的 标记 。 代 码 如 下 : 

Dim BjZzipCode 

Bjzipcode=100010 

"声明 一 个 变量 Bj2ipcode， 并 为 其 赋值 为 100010 

在 声明 字符 串 类 型 的 数据 时 ， 需 要 在 数据 的 值 前 后 加 双 引 号 “"”。 代码 如 下 : 


Dim UniversityName 

















UniversityName="TsingHua" 


"声明 一 个 变量 UniversityName， 并 为 其 赋值 为 字符 串 “TsingHua?” 

除了 这 两 大 类 数据 类 型 外 , 在 VBScript 脚本 代码 执行 的 过 程 中 , 还 存在 一 些 Variant 
类 型 的 子 数据 类 型 ， 如 表 11-2 所 示 。 
表 11-2_,Variant 的 子 数据 类 型 

























说 明 
未 初始 化 的 Variant。 对 于 数值 变量 , 值 为 0; 对 于 字符 串 变 量 , 值 为 零 长 度 字符 串 “""?” 
Null 不 包含 任何 有 效 数据 的 Variant 
Boolean 含 “True” 和 “False” 
Byte 字 节 变量 ， 包 含 0 到 255 之 间 所 有 整数 
Integer 整 型 数据 ， 包 含 -32 768 到 32 767 之 间 的 整数 
货币 型 数据 ， 包 含 -922 337 203 685 477.5808 到 922 337 203 685 477 5807 之 间 的 所 有 
Currency 浮 点 数 
Long 单 精度 整数 ， 包 含 -2 147 483 648 到 2 147 483 647 之 间 的 整数 
总 单 精 度 浮 点 数 ， 包 含 负数 范围 从 -3.402823E38 到 -1.401298E-45， 正 数 范围 从 
ee 1.401298E-45 到 3.402823E38 的 所 有 浮 点 数 
Do 双 精 度 浮 点 数 ， 包 含 负数 范围 从 -1.79769313486232E308 到 -4.94065645841247E-324， 
EE 正 数 范围 从 4.94065645841247E-324 到 1.79769313486232E308 的 所 有 浮 点 数 
包含 表示 日 期 的 数字 ， 日 期 范围 从 公元 100 年 1 月 1 日 到 公元 9999 年 12 月 31 日 
String 长 字符 串 数据 ， 最 大 长 度 为 20 亿 位 
Object 对 象 
Error 蛙 序 的 错误 号 
4. 运算 符 
运算 符 是 标识 表达 式 中 各 种 变量 或 常量 运算 方式 的 符号 。VBScript 的 运算 符 主要 包 


括 4 种， 即 算术 运算 符 、 比 较 运 算 符 、 连 接 运 算 符 和 逻辑 运算 符 ， 如 表 11-3 所 示 。 
2 表 11-3_VBScript 的 运算 符 


运算 符 类 型 
算术 运算 符 






小 于 等 于 





算术 运算 符 
算术 运算 符 


大 于 等 于 
对 象 引用 比较 





算术 运算 符 
算术 运算 符 





强制 字符 串 连接 
强制 求 和 





























算术 运算 符 远 辑 运算 符 凶 辑 与 
算术 运算 符 | “- | 减 逻辑 运算 符 | ”Or ”| 四 辑 或 
比较 运算 符 = 等 于 /赋值 Xor 逻辑 异 或 
比较 运算 符 : 过 和 运算 符 逻辑 等 价 











比较 运算 符 














逻辑 运算 符 








逻辑 隐 含 





比较 运算 符 
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同样 当 加 与 减 同时 出 现在 一 个 表达 式 中 时 ， 按 从 左 到 右 的 顺序 计算 加 、 减 法 运算 符 。 


字符 串 连 接 (&) 运算 符 不 是 算术 运算 符 ， 但 是 在 优先 级 顺序 中 ， 它 排 在 所 有 算术 
运算 符 之 后 和 所 有 比较 运算 符 之 前 。Is 运算 符 是 对 象 引用 比较 运算 符 。 它 并 不 比较 对 象 








或 对 象 的 值 ， 而 只 是 进行 检查 ， 判 断 两 个 对 象 引用 是 否 引用 同一 个 对 象 。 





VBScript 脚本 语言 的 控制 语句 与 其 他 编程 语言 的 控制 语句 的 作用 和 含义 相同 ， 都 是 














于 控制 程序 的 流程 ， 以 实现 程序 的 各 种 结构 方式 。 它 们 由 特定 的 语句 定义 符 组 成 。 





当 乘 号 与 除 号 同时 出 现在 一 个 表达 式 中 时 ， 按 从 左 到 右 的 顺序 计算 乘 、 除 运算 符 。 


1. 条 件 语句 
条 件 语 句 的 作用 是 对 一 个 或 多 个 条 件 进行 判断 ， 根 据 判 断 的 结果 执行 相关 的 语句 。 


VBScript 的 条 件 语句 主要 有 两 种 ， 即 Then*…Else 语句 和 Select…Case 语句 。 


1) If Then…Else 语句 
If Then…Else 语句 根据 表达 式 是 否 成 立 执行 相关 语句 ， 因 此 又 被 称 作 单 路 选择 的 条 


件 语句 。 使 用 入 Then…Else 语句 的 方法 如 下 所 示 。 


IF Condition Then 

[statements] 

End If 

或 者 ， 

IF Condition Then [statements] 

在 If…Then 语句 中 ， 包 含 两 个 参数 ， 分 别 为 Condition 和 statements 参数 。 

口 Condition 参数 ”为 必要 参数 ， 即 表达 式 ( 数值 表达 式 或 者 字符 串 表 达 式 )， 其 运 
算 结果 为 True 或 False。 另 外 ， 当 参数 condition 为 Null， 则 参数 condition 将 视 
为 False。 

口 statements 参数 ”由 一 行 或 者 一 组 代码 组 成 , 也 称 为 语句 块 。 但 是 在 单行 形式 中 ， 
且 没有 Else 子 名 时 ， 则 statements 参数 为 必要 参数 。 该 语句 的 作用 是 表达 式 的 值 
为 True 或 非 堆 时， 执行 Then 后 面 的 语句 块 (或 语句 )， 否 则 不 作 任 何 操 作 。 

If…Then…Else 语句 的 一 种 变形 允许 从 多 个 条 件 中 选择 ， 即 添加 ElseIf 子 句 以 扩充 


Jf…Then*…Else 语句 的 功能 ， 使 其 可 以 控制 基于 多 种 可 能 的 程序 流程 。 详 细 的 使 用 方法 


Sub ReportValue (value) 
If value = 0 Then 
MsgBox value 
Elaerf valne = 1 Then 

MsgBox value 
ElseIf value = 2 then 
Msgbox value 
Else 


Msgbox "数值 超出 范围 ! " 
End If 


可 以 添加 任意 多 个 ElseIf 子 句 以 提供 多 种 选择 。 使 用 多 个 ElseIf 子 句 经 常会 变 得 很 
累 袭 ， 在 多 个 条 件 中 进行 选择 的 更 好 方法 是 使 用 Select…Case 语句 。 


提 示 


2) Select…Case 语句 
Select…Case 语句 的 作用 是 判断 多 个 条 件 ， 根 据 条 件 的 成 立 与 否 执行 相关 的 语句 ， 
因此 又 被 称 作 多 路 选择 的 条 件 语句 。 使 用 Select…Case 的 格式 如 下 。 


Select Case testexpression 
[Case expressionlist-n 
[statements-n]] ... 

[Case Else 
[elsestatements]] 

End Select 


Select Case 语句 的 语法 具有 以 下 几 个 部 分 。 

口 testexpression ”必要 参数 ， 任 何 数 值 表 达 式 或 字符 串 表 达 式 。 

口 expressionlist-n ”Case 语句 的 必要 参数 。 其 形式 为 expression，expression To 
expression，Is comparisonoperator expression 的 一 个 或 多 个 组 成 的 分 界 列表 。To 
关键 字 可 用 来 指定 一 个 数值 范围 。 如 果 使 用 To 关键 字 ， 则 较 小 的 数值 要 出 现在 
To 之 前 。 使 用 Is 关键 字 时 ， 则 可 以 配合 比较 运算 符 ( 除 Is 和 Like 之 外 ) 来 指定 


一 个 数值 范围 。 

口 statements-n 可 选 参数 。 一 条 或 多 条 语句 ,， 当 testexpression 匹配 expressionlist-n 
中 的 任何 部 分 时 执行 。 

口 elsestatements 可 选 参数 。 一 条 或 多 条 语句 ， 当 testexpression 不 匹配 Case 子 句 
的 任何 部 分 时 执行 。 


在 Select…Case 语句 中 , 每 个 Case 语句 都 会 判断 表达 式 的 值 是 否 符合 该 语句 后 面条 
件 的 要 求 。 如 果 条 件 值 为 tue 时 ， 则 执行 相关 的 语句 并 自动 跳出 条 件 选 择 语句 结构 ， 否 
则 继续 查找 与 其 匹配 的 值 。 当 所 有 列 出 的 条 件 都 不 符合 表达 式 的 值 时 ， 将 执行 Case Else 
下 的 语句 然后 再 跳出 条 件 选 择 语句 结构 。 

2. 循环 语句 

使 用 循环 语句 可 以 重复 执行 一 组 语句 。 循 环 可 以 分 为 3 类 : 第 一 类 是 在 条 件 变 为 假 
(false) 之 前 重复 执行 语句 ， 第 二 类 是 在 条 件 变 为 真 true) 之 前 重复 执行 语句 ， 第 三 类 
是 按照 指定 的 次 数 重复 执行 语句 。 

1) 使 用 Do 循环 

使 用 Do…Loop 循环 语句 可 以 多 次 〈 次 数 不 定 ) 执行 语句 块 ， 在 条 件 为 真 (tmue) 时 
或 条 件 为 真 〈true) 之 前 ， 重 复 执行 指定 的 语句 块 ， 使 用 方法 如 下 所 示 。 
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另外 ， 在 Do…Loop 循环 语句 中 ， 还 可 以 将 While 关键 字 放 到 循环 语句 的 后 面 对 条 
件 进行 判断 。 这 样 ， 该 循环 语句 至 少 要 执行 一 次 指定 的 程序 块 ， 使 用 方法 如 下 所 示 。 


使 用 Until 关键 字 ， 可 以 用 于 检查 Do…Loop 语句 中 的 条 件 。 只 要 条 件 为 假 (false)， 
就 会 一 直 进行 循环 ， 使 用 方法 如 下 所 示 。 


另外 ,在 Do…Loop 循环 语句 中 ,同样 可 以 将 Until 关键 字 放 到 循环 语句 的 后 面 对 条 
件 进行 判断 。 这 样 ， 该 循环 语句 至 少 也 要 执行 一 次 指定 的 程序 块 ， 使 用 方法 如 下 所 示 。 





Exit Do 语句 用 来 退出 Do…Loop 循环 。 通常， 只 有 在 某 些 特 殊 情 况 下 才 需 要 退出 
循环 ， 所 以 可 以 在 和 Then…Else 语句 的 True 语句 块 中 使 用 Exit Do 语句 ， 使 用 方法 如 下 
所 示 。 


在 上 面 的 脚本 命令 中 ， 变 量 Numl 的 初始 值 将 导致 死 循 环 。If Then…Else 条 件 语 句 
将 检查 此 条 件 ， 防 止 出 现 死 循 环 。 

2) 使 用 For…Next 循环 

For…Next 语句 可 以 按照 指定 的 次 数 来 重复 执行 语句 。 在 该 循环 中 使 用 计数 器 变量 ， 
该 变量 的 值 会 随 每 一 次 循环 增加 或 减少 。 

例如 ， 使 用 For…Next 语句 将 程序 块 中 的 内 容重 复 执行 100 次 。 其 中 ，For 语句 指定 
计数 器 变量 i 及 其 起 始 值 与 终止 值 ， Next 语句 使 计数 器 变量 每 次 增加 1， 代 码 如 下 所 示 。 








在 For…Next 循环 语句 中 使 用 Step 关键 字 ， 可 以 指定 计数 器 变量 每 次 增加 或 减少 的 
值 。 例 如 ， 将 上 例 中 计数 器 变量 的 值 每 次 增加 2， 这 样 ， 程 序 块 中 的 内 容 会 重复 执行 50 
次 ， 代 码 如 下 所 示 。 





如 果 想 使 计数 器 变量 递减 ， 则 可 以 将 Step 设置 为 负 值 。 但 是 ， 计 数 器 变量 的 终止 值 
必须 小 于 起 始 值 。 例 如 ， 将 计数 器 变量 i 的 值 每 次 减少 2， 代 码 如 下 所 示 。 





Exit…For 语句 可 以 用 于 在 计数 器 达到 其 终止 值 之 前 退出 For…Next 语句 。 通 常 ， 只 
有 在 某 种 特殊 情况 下 才 要 退出 循环 ， 例 如 在 发 生 错 误 时 ， 所 以 可 以 在 下 Then…Else 语句 
的 true 语句 块 中 使 用 Exit…For 语句 强制 退出 循环 ， 使 用 方法 如 下 所 示 。 





3) For Each…Next 循环 

For Each…Next 循环 与 For…Next 循环 类 似 ， 但 它 不 指定 程序 执行 的 次 数 ， 而 是 对 
于 数组 中 的 每 个 元 素 或 对 象 集合 中 的 每 一 项 重复 一 组 程序 ， 这 在 不 知道 集合 中 元 素 的 数 
目 时 非常 有 用 ， 使 用 方法 如 下 所 示 。 





Next 

' 通 过 循环 语句 为 数组 中 的 每 个 元 素 赋值 
For Each anyElement In myArray 
"根据 数组 元 素 的 个 数 进行 循环 
Sum=anyElement+Sum 

Next 

' 读 取 数 组 中 下 一 个 元 素 

%> 


11.3 ASP 内 置 对 象 


ASP 提供 6 种 内 置 对 象 ， 这 些 对 象 可 以 使 用 户 通过 浏览 器 实现 请 求 发 送信 息 、 响 应 
浏览 器 以 及 存储 用 户 信息 等 功能 。 





Request 对 象 用 于 访问 用 HTTP 请 求 传递 的 信息 , 也 就 是 客户 端 用 户 向 服务 器 请 求 页 
面 或 者 提交 表单 时 所 提供 的 所 有 信息 ， 包 括 HTML 表格 用 POST 方法 或 GET 方法 传递 
的 参数 、 客 户 端 用 户 浏览 器 的 相关 信息 、 保 存在 这 些 域 中 浏览 器 的 Cookies、 附 加 在 页 面 
URL 后 的 参数 信息 。 

1，Request 对 象 成 员 


Request 对 象 的 属性 和 方法 分 别 各 有 一 个 ， 而 且 都 不 经 常 使 用 。 但 是 ，Request 对 象 
还 提供 了 若干 个 集合 , 这 些 集合 可 以 用 于 访问 客户 端 请 求 的 各 种 信息 。Request 对 象 成 员 
介绍 如 表 11-4 所 示 。 
227 表 11-4_Request 对 象 成 员 
Request 对 象 成 员 
属性 TotalBytes 


方法 BinaryRead(count) 

















返回 由 客户 端 发 出 请 求 的 字符 流 的 字 节 数量 ， 是 一 个 只 读 属性 

当 使 用 POST 方法 发 送 请 求 时 ， 从 请 求 的 数据 中 获得 count 字 节 的 数据 ， 
并 返回 一 个 数组 

读 取 使 用 URL 参数 方式 提交 的 各 值 对 数据 或 者 以 GET 方式 提交 表单 
<form> 中 的 数据 

读 取 使 用 POST 方式 提交 的 表单 <form> 中 的 数据 

客户 端 请 求 的 HTTP 报头 值 ， 以 及 一 些 Web 服务 器 环境 变量 值 的 集合 

用 户 系统 发 送 的 所 有 Cookies 值 的 集合 

客户 端 访问 页 面 或 其 他 资源 时 表明 身份 的 客户 证 书 的 所 有 字段 或 条 目的 
数据 集合 


在 Request 对 象 的 所 有 集合 中 ， 最 经 常 使 用 的 Form 集合 和 QueryString 集合 ， 它 们 
分 别 包含 客户 端 使 用 POST 方法 发 出 的 信息 和 使 用 GET 方法 发 出 的 信息 。 


2. 使 用 Request 对 象 
当 用 户 在 浏览 器 地 址 栏 中 输入 网 页 的 URL 地 址 访问 网 页 ， 就 是 通过 GET 方法 向 服 


集合 QueryString 








集合 Form 
合 ServerVariables 
集合 Cookies 











合 ClientCertificate 
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务 器 发 布 信息 ， 而 发 送 的 信息 可 以 从 浏览 器 地 址 栏 的 URL 地 址 中 看 到 。POST 方法 只 有 
通过 定义 <form> 标 签 的 method 属性 为 post 时 才 会 被 使 用 。 

1) 访问 Request.QueryString 集合 
当 用 户 使 用 GET 方法 传递 数据 时 ， 所 提交 的 数据 会 被 附加 在 查询 字符 串 
(QueryString) 中 一 起 提交 到 服务 器 端 。QueryString 集合 的 功能 就 是 从 查询 字符 串 中 读 
取 用 户 提交 的 数据 。 访 问 QueryString 集合 中 项 的 语句 如 下 所 示 : 

Value = Request.QueryString (Key) 

其 中 ， 参 数 Key 的 数据 类 型 为 String， 表 示 要 提取 的 HTTP 查询 字符 串 中 变量 的 名 
称 。 如 果 该 键 值 被 设 定 ，QueryString 集合 将 返回 与 该 键 值 相 关 的 项 ， 否 则 将 返回 完整 的 
查询 字符 串 。 

QueryString 集合 包含 有 3 个 属性 ， 即 Count、Item 和 Key， 它 们 的 功能 及 使 用 方法 
如 表 11-5 所 示 。 
2 表 11-5 。QueryString 集合 的 属性 

功 
返回 QueryString 中 键 值 的 数量 












































返回 特定 键 对 应 的 值 
返回 相应 项 的 键 Request.QueryString. Key(Index) 








2) 访问 Request.Form 集合 

GET 方法 有 一 个 缺点 就 是 URL 字符 串 的 长 度 在 被 浏览 器 及 服务 器 使 用 时 有 一 些 限 
制 ， 而 且 会 将 某 些 希 望 隐藏 的 数据 暴露 出 来 。 所 以 ， 为 了 避免 以 上 问题 ， 可 以 设置 表单 
使 用 POST 方法 传递 数据 ， 代 码 如 下 所 示 : 

<form name="forml" method="post" action="Check.asp"> 

在 上 面 的 语句 中 ， 键 值 被 存储 在 HTTP 请 求 主体 内 发 送 ， 这 样 就 可 以 使 用 
Request.Form 集合 获取 HTML 表单 中 的 信息 ， 其 使 用 方法 如 下 : 

Value = Request .Form (name) 

Form 集合 同样 包含 有 3 个 属性 ， 即 Count、Item 和 Key， 它 们 的 功能 及 使 用 方法 如 
表 11-6 所 示 。 
3 表 11-6__Form 集合 的 属性 










功 








Ae 
Count Request.Form.Count 


Request.Form.Item(Index) 


Request.Form.Key(Index) 








获取 Form 集合 中 只 作为 可 读 变量 的 对 象 的 
名 称 


Response 对 象 用 于 向 客户 端 浏 览 器 发 送 数据 ， 用 户 可 以 使 用 该 对 象 将 服务 器 的 数据 


以 HTML 的 格式 发 送 到 用 户 端的 浏览 器 ，Response 与 Request 组 成 了 一 对 接收 、 发 送 数 
据 的 对 象 ， 这 也 是 实现 动态 的 基础 。 


1. Response 对 象 属性 


Response 对 和 象 也 提供 一 系列 的 属性 ， 可 以 读 取 和 修改 ， 使 服务 器 端的 响应 能 够 适应 
客户 端的 请 求 ， 这 些 属性 通常 由 服务 器 设置 。 

1) Buffer 属性 

该 属性 用 于 指示 是 否 是 缓冲 页 输出 ，Buffer 属性 的 语法 格式 如 下 : 


Response.Buffer = Flag 


其 中 ，Flag 值 为 布尔 类 型 数据 。 若 当 Flag 为 false 时 ， 服 务 器 在 处 理 脚 本 的 同时 将 
输出 发 送 给 客户 端 ， 当 Flag 为 true 时 ， 服 务 器 端 Response 的 内 容 先 写 入 缓冲 区 ， 脚 本 
处 理 完 后 再 将 结果 全 部 传递 给 用 户 。Buffer 属性 的 默认 值 为 false。 


提 ” 示 


2) CacheControl 属性 

该 属性 指定 了 一 个 脚本 生成 的 页 面 是 否 可 以 由 代理 服务 器 缓存 。 为 这 个 属性 分 配 的 
选项 ， 可 以 是 字符 串 Public 或 者 是 Private。 启 用 脚本 生成 页 面 的 缓存 和 禁止 页 面 缓存 ， 
可 分 别 使 用 如 下 代码 : 

< 多 

Response.CacheControl="public" “启用 缓存 

Response.CacheControl="Private" “' 禁 止 缓存 

%> 

3) Charset 属性 

该 属性 将 字符 集 名 称 附加 到 Response 对 象 中 的 Content-type 标题 的 后 面 ， 用 来 设置 
Web 服务 器 响应 给 客户 端的 文件 字符 编码 。 其 语法 如 下 : 

Response.Charset (字符 集 名 称 ) 

例如 : 

Response.Charset="GB2312" "简体 中 文 显 示 


4) ContentType 属性 

ContentType 属性 用 来 指定 响应 的 HITP 内 容 类 型 。 如 果 未 指定 ， 则 默认 是 
texVHTML。 其 语法 格式 如 下 : 

Response.ContentType = 内 容 类 型 


一 般 来 说 ，ContentType 都 以 “类 型 / 子 类 型 ”的 字符 串 来 表示 ， 通 常 有 texUHTML、 
image/GIF、image/JPEG、text/plain 等 。 
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5) Expires 属性 

该 属性 指定 浏览 器 上 缓冲 存储 的 页 还 有 多 少时 间 过 期 。 如 果 用 户 在 某 个 页 过 期 之 前 
又 回 到 此 页 ， 就 会 显示 缓冲 区 中 的 版 本 ， 这 种 设置 有 助 于 数据 的 保密 。 语 法 格式 如 下 : 

Response .Expires= 分 钟 数 

6) ExpiresAbsolute 属性 

该 属性 指定 缓存 于 浏览 器 中 的 页 的 到 期 日 期 和 时 间 。 在 未 到 期 之 前 ， 若 用 户 返 回 到 
该 页 ， 该 缓存 就 显示 ; 如 果 未 指定 时 间 ， 该 主页 当天 午夜 到 期 ， 如 果 未 指定 日 期 ， 则 该 
主页 在 脚本 运行 当天 的 指定 时 间 到 期 。 语 法 格式 如 下 : 

Response.ExpiresAbsolute = 日 期 时 间 


7) IsClientConnected 属性 

该 属性 为 只 读 ， 返 回 客户 是 否 仍然 连接 和 下 载 页 面 的 状态 标志 。 有 时 候 程序 脚本 要 
花 比 较 长 的 时 间 去 处 理 ， 如 果 客 户 端 用 户 没有 耐心 等 待 而 离 去 ， 服 务 器 端 将 脚本 执行 下 
去 显然 没有 任何 意义 ， 这 时 候 就 可 以 通过 IsClientConnected 属性 判断 客户 端 是 否 仍 然 与 
服务 器 连接 来 决定 程序 是 否 继续 执行 。 该 属性 返回 一 个 布尔 值 。 

8) PICS 属性 

PICS 属性 用 来 设置 PICS 标签 ， 并 把 响应 添加 到 标 头 Response Header)。PICS 是 
一 个 负责 定义 互联 网 网 络 等 级 及 等 级 数据 的 W3C 团队 。 该 属性 的 语法 格式 如 下 : 


Response.PICS (PICS 字符 串 ) 


9) Status 属性 
Status 属性 用 来 设置 Web 服务 器 要 响应 的 状态 行 的 值 。HTTP 规格 中 定义 了 Status 
值 。 该 属性 设置 语法 如 下 : 


Response.Status = "状态 描述 字符 串 " 





2. Response 对 象 方法 


Response 对 象 提供 了 一 系列 的 方法 ,用 于 直接 处 理 返回 给 客户 端 而 创建 的 页 面 内 容 。 

1) Write 方法 

Response.Write 是 Response 对 象 最 常用 的 方法 , 该 方法 可 以 向 浏览 器 输出 动态 信息 ， 
其 语法 格式 如 下 : 

Response.Write 任何 数据 类 型 


只 要 是 ASP 中 合法 的 数据 类 型 ， 都 可 以 用 Response.Write 方法 来 显示 。 由 于 前 面 多 
次 使 用 该 方法 ， 这 里 就 不 再 详细 介绍 。 

2) Redirect 方法 

Response.Redirect 可 以 用 来 将 客户 端的 页 面 重 定向 到 一 个 新 的 页 面 ， 有 页 面 转换 时 





常用 到 的 就 是 这 个 方法 。 具 体 语 法 格式 如 下 : 
Response.Redirect URL 


URL 是 指 需 要 转 到 的 相应 的 页 面 。 例 如 下 面 的 代码 是 一 个 简单 的 登录 模块 ， 当 用 户 
名 和 密码 正确 时 转向 欢迎 页 面 ， 否 则 转向 错误 信息 页 面 。 

IE UName<>"Admin"Or PassWord<>"Rdmin"Then 

Response.Redirect"Error.asp" 

Response.End 

Else 

Response.Redirect"Welcome.asp" 

Response.End 

3) Flush 方法 

如 果 将 Response.Buffer 设置 为 TRUE， 那 么 使 用 Response.Flush 方法 可 以 立即 发 送 
IS 缓冲 区 中 的 所 有 当前 页 。 如 果 没 有 将 Response.Buffer 设置 为 TRUE, 使 用 该 方法 将 导 
致 运行 时 错误 。 

4) Clear 方法 

如 果 将 Response.Buffer 设置 为 TRUE， 那么 使 用 Response.Clear 方法 可 以 删除 缓冲 
区 中 的 所 有 HIML 输出 。 如 果 没 有 将 Response.Buffer 设置 为 TRUE， 使 用 该 方法 将 导致 
运行 时 错误 。 

5) End 方法 

Response.End 方法 使 Web 服务 器 停止 处 理 脚本 并 返回 当前 结果 , 文件 中 剩余 的 内 容 
将 不 执行 。 

当 Buffer 属性 值 为 tue 时 ， 服 务 器 将 不 会 向 客户 端 发 送 任何 信息 ,直到 所 有 程序 执行 
完成 或 者 遇 到 Response.Flush 或 者 Response End 方法 ， 才 将 缓冲 区 的 信息 发 送 到 客户 端 。 

有 时 可 能 希望 在 页 面 结束 之 前 的 某 些 点 上 停止 代码 的 执行 ， 这 可 以 通过 调用 
Response.End 方法 刷新 所 有 的 当前 内 容 到 客户 端 并 中 止 代码 进一步 的 执行 。 

6) BinaryWrite 方法 

Response.BinaryWirite 方法 主要 用 于 向 客户 端 写 非 字符 串 信 息 (如 客户 端 应 用 程序 所 
需要 的 二 进 制 数据 等 )。 语 法 格式 如 下 : 

Response.BinaryWrite 二 进 制 数据 

7) AppendTolog 方法 

Response.AppendTolog 方法 将 字符 串 添加 到 Web 服务 器 日 志 条 目的 末尾 。 由 于 IIS 
日 志 中 的 字段 用 逗号 分 隔 ， 所 以 该 字符 串 中 不 能 包含 逗号 〈“,”)， 而 且 字 符 串 的 最 大 长 
度 为 80 个 字符 。 语 法 格式 如 下 : 

Response.AppendTolog "要 记录 的 字符 吊 " 
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8) AddHeader 方法 

Response.AddHeader 方法 用 指定 的 值 添加 HTTP 标题 ， 该 方法 常常 用 来 响应 要 添加 
新 的 HTTP 标题 。 它 并 不 代替 现 有 的 同名 标题 。 一 旦 标题 被 添加 ， 将 不 能 删除 ， 有 具体 语 
法 格式 如 下 : 


Response.AddHeader Name,Value 
在 该 语句 中 ， 包 含 两 个 参数 内 容 ， 其 含义 如 下 。 
口 Name 新 头 部 变量 的 名 称 。 

口 Value 新 头 部 变量 的 初始 值 。 


3. Cookie 集合 


在 上 述 的 Request 对象 中 ， 已 经 介绍 过 通过 Cookie 集合 ， 来 读 取 存 储 在 客户 端的 信 
息 ， 然 后 ， 通 过 Response 对 象 的 Cookie 集合 送 回 给 用 户 端 浏览 器 。 如 果 指 定 的 Cookie 
不 存在 ， 则 系统 会 自动 在 客户 端的 浏览 器 中 建立 新 的 Cookie。 使 用 Response.Cookies 的 
语法 如 下 : 


Response.Cookies (name) [ (key) | .attribute]=value 


各 参数 的 意义 如 下 : 
口 name 表示 Cookie 的 名 称 ,为 Cookie 指定 名 称 后 就 可 以 在 Request.Cookie 中 使 
用 该 名 称 获得 相应 的 Cookie 值 。 
口 key 表示 该 Cookie 会 以 目录 的 形式 存放 数据 。 如 果 指 定 了 key， 则 Cookie 形成 
了 一 个 字典 ， 而 key 的 值 将 被 设 为 CookieValue。 
口 attribute 定义 了 与 Cookie 自身 有 关 的 属性 。 参数 attribute 定义 的 Cookies 集合 
属性 如 表 11-7 所 示 。 
2 表 11-7_attribute 参数 列表 










只 写 。 若 被 指定 ， 则 Cookie 将 被 发 送 到 该 域 的 请 求 中 

只 写 。 此 属性 用 来 给 Cookie 设置 一 个 期 限 ， 在 期 限 内 只 要 打开 网 页 就 可 以 调用 被 保存 
的 Cookie， 如 果 过 了 此 期 限 ，Cookie 就 自动 被 删除 。 如 果 没 有 为 一 个 Cookie 设 定 有 效 
期 ， 则 其 生命 期 从 打开 浏览 器 开始 ， 到 关闭 浏览 器 结束 ， 下 次 打开 浏览 器 将 重新 开始 
HasKeys | 只 写 。 指 定 Cookie 是 否 包 含 关键 字 

只 写 。 若 定义 该 属性 ， 则 Cookie 只 发 送 到 对 该 路 径 的 请 求 中 。 如 果 未 设置 该 属性 ， 则 
使 用 应 用 程序 的 路 径 














只 写 。 指 定 Cookie 能 否 被 用 户 读 取 


例如 ， 创 建 了 一 个 名 为 “firstname” 的 Cookie 并 为 它 赋值 “Murphy”， 可 以 使 用 如 
下 代码 : 


< 


Response.Cookies ("firstname")="Murphy" 
务 > 


Cookie 其 实 是 一 个 标签 。 当 访问 一 个 需要 唯一 标识 的 Web 站 点 时 , 会 在 用 户 的 硬盘 
上 留 下 一 个 标记 ， 下 一 次 访问 该 站 点 时 ， 该 站 点 的 页 面 就 会 查找 这 个 标记 ， 以 确定 该 浏 
览 者 是 否 访问 过 本 站 点 。 每 个 站 点 都 可 以 有 自己 的 标记 Cookie， 并 且 标 记 的 内 容 可 以 
该 站 点 的 页 面 随时 读 取 。 

使 用 Response.Cookies 创建 Cookie 并 设置 其 属性 可 以 使 用 如 下 代码 : 


< 
Response.Cookies ("LastVisitCookie") = FormatDateTime (Now) 















































Response.Cookies ("LastVisitCookie") .Domain="www .MyWeb .com" 
Response.Cookies ("LastVisitCookie") .Path="/" 
Response.Cookies ("LastVisitCookie") .Secure=True 
Response.Cookies ("LastVisitCookie") .Expires=Date( )+20 

务 > 


上 述 代码 创建 名 为 LastVisitCookie 的 Cookie， 值 为 代码 运行 时 的 当前 系统 时 间 ， 其 
有 效 期 为 20 天 ， 并 且 当 客户 端 浏 览 器 请 求 www.MyWeb.com 站 点 时 ， 该 Cookie 随同 请 
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， 客 户 端 浏览 器 只 对 创建 Cookie 的 目录 中 的 页 面 提出 请 求 时 ， 才 将 
Cookie 随同 请 求 发 往 服 务 器 。 通 过 指定 Path 属性 ， 可 以 指定 站 点 中 何 处 的 Cookie 合法 ， 
并 且 这 个 Cookie 将 随同 请 求 被 发 送 。 如 果 Cookie 随同 对 整个 站 点 的 页 面 请 求 发 送 ， 则 
应 设置 Path 为 “/”。 

如 果 设 置 了 Domain 属性 , 则 Cookies 将 随同 对 域 的 请 求 被 发 送 。 域 属性 表明 Cookie 
由 哪个 网 站 创建 和 读 取 ， 默 认 情况 下 ，Cookie 的 域 属性 设置 为 创建 Cookie 的 网 站 。 

有 时 在 一 个 页 面 中 可 能 需要 定义 很 多 个 Cookie 变量 ， 为 了 更 好 地 管理 ， 在 Cookie 
集合 中 常 引入 一 个 概念 “ 子 键 ”。 引 用 它 的 语法 如 下 : 


Request .Cookies ("CookieName") ("KeyName")=CookieValue 
例如 ， 下 面 创建 一 个 名 为 "Information" 的 Cookie， 其 中 保存 了 两 个 子 键 值 : 


Response.Cookies ("Information") ("User")="Admin" 
Response.Cookies ("Information") ("Password")="Admin" 


如 果 没 有 指定 “ 子 键 ” 名 而 直接 引用 Cookie 中 的 数据 , 将 会 返回 一 个 包含 所 有 的 “ 子 
键 ” 名 及 值 的 字符 串 。 例 如 ， 上 面 这 个 例子 包含 两 个 “ 子 键 ”，User 和 Password。 当 用 
户 没有 指定 其 “ 子 键 ”名 ， 而 直接 通过 Request.Cookies("Information") 来 引用 其 值 时 ， 则 
会 得 到 下 列 字符 串 : 
Information=User=AdmingPassword=Admin 
正确 获取 其 中 数据 的 方法 为 : 


Name=Requset .Cookies ("Information"). ("User") 




















Password=Requset .Cookies ("Information"). ("Password") 
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Application 对 象 是 一 个 应 用 程序 级 的 对 象 , 在 同一 虚拟 目录 及 其 子 目录 下 的 所 有 .asp 
文件 构成 了 ASP 应 用 程序 .使 用 Application 对 象 可 以 在 给 定 的 应 用 程序 的 所 有 用 户 之 间 
共享 信息 ， 并 在 服务 器 运行 期 间 持久 地 保存 数据 。 而 且 ，Application 对 象 还 有 控制 访问 
应 用 层 数 据 的 方法 和 可 用 于 在 应 用 程序 启动 和 停止 时 触发 过 程 的 事件 。 


1. Application 对 象 成 员 





















































Application 对 象 没有 属性 ， 但 是 提供 了 一 些 集合 、 方 法 和 事件 。Application 对 象 成 
员 介绍 如 表 11-8 所 示 。 
2 表 11-8 Application 对 象 成 员 

Application 对 象 成 员 说 明 

没有 使 用 <object> 元 素 定义 的 存储 于 Application 对 象 中 的 所 有 变量 的 
集合 
集合 StaticObject 使 用 <object> 元 素 定义 的 存储 于 Application 对 象 中 的 所 有 变量 的 集合 
方法 Content.Remove() 移 除 Contents 集合 中 的 某 个 变量 
方法 Content.RemoveAll() | 移 除 Contents 集合 中 的 所 有 变量 
锁定 Application 对 象 ， 只 有 当 ASP 页 面 对 内 容 能 够 进行 访问 ,解决 并 
















合 Contents 





方法 Lock0 发 操作 问题 

方法 Unlock0 解锁 Application 对 象 

事件 OnStart 当 ASP 启动 时 触发 ， 在 网 页 执行 之 前 和 任何 Session 创建 之 前 发 生 
事件 OnEnd 当 ASP 应 用 程序 结束 时 触发 





2. 使 用 Application 对 象 


在 改变 Application 对 象 中 的 变量 之 前 , 需要 使 用 Lock() 方 法 阻止 其 他 用 户 修改 存储 
在 Application 对 象 中 的 变量 ， 以 确保 在 同一 时 间 只 有 一 个 用 户 可 以 修改 和 存 取 
Application 对 象 。 

例如 ， 通 过 将 Application 对 象 中 变量 OnLine Num 的 值 加 1 并 返回 给 原 变量 ， 可 以 
实现 一 个 简单 的 网 页 计数 器 功能 ， 代 码 如 下 所 示 。 

<% 

Application.Lock() 

Application ("OnLine Num")=Application ("OnLine Num")+1 

Application.Unlock() 

和 > 

本 网 页 共 访 问 了 <$=Application ("OnLine_Num")%> 次 ! 


当 用 户 浏览 包含 以 上 代码 的 页 面 时 ， 首 先 锁定 Application 对 象 ， 然 后 将 Application 


对 象 中 变量 OnLine Num 的 值 加 1， 最 后 解除 对 Application 对 象 的 锁定 ， 以 便 让 其 他 用 
户 访问 此 变量 。 











Server 对 象 提供 对 服务 器 上 的 方法 和 属性 进行 访问 ， 最 常用 的 方法 是 创建 ActiveX 
组 件 的 实例 。 其 他 的 方法 用 于 将 URL 或 HTML 编码 成 字符 串 、 将 虚拟 路 径 映 射 到 物理 
路 径 以 及 设置 脚本 的 超时 时 限 。 


1. Server 对 象 成 员 


Server 对 象 只 提供 了 一 个 属性 ， 但 是 它 提供 了 7 种 方法 用 于 格式 化 数据 、 管 理 网 页 
执行 、 管 理 外 部 对 象 和 组 件 执行 以 及 处 理 错误 ， 这 些 方法 为 ASP 的 开发 提供 了 很 大 的 方 
便 。Server 对 象 成 员 介绍 如 表 11-9 所 示 。 

2 _ 表 11-9 Server 对 象 成 员 

Server 对 象 成 员 说 明 

属性 ScriptTimeout 脚本 在 服务 器 退出 执行 和 报告 一 个 错误 之 前 执行 的 时 间 

创建 组 件 、 应 用 程序 或 脚本 对 象 的 一 个 实例 ， 使 用 组 件 的 ClassID 或 者 

ProgID 为 参数 

方法 MapPath() 将 虚拟 路 径 映 射 为 物理 路 径 ， 多 用 于 Access 数据 库 文件 

方法 HIMLEncode 将 输入 字符 串 值 中 所 有 非法 的 HTML 字符 转换 为 等 价 的 HTML 条 目 

方法 URLEncode("url") | 将 URL 编码 规则 ， 包 括 转 义 字符 ， 应 用 到 字符 串 

方法 Execute("url") 停止 当前 页 面 的 执行 ， 把 其 转 到 URL 指定 的 网 页 

方法 Transfer(url)) 当 新 页 面 执行 完成 时 ， 结 束 执行 过 程 而 不 返回 到 原来 的 页 面 
返回 ASPError 对 象 的 一 个 引用 ， 包 含 该 页 面 在 ASP 处 理 过 程 中 发 生 的 最 
近 一 次 错误 的 详细 数据 


2. 使 用 Server 对 象 


ScriptTimeout 属性 用 于 ASP 页 面 超时 的 时 间 限 制 。 当 一 个 ASP 页 面 在 脚本 超时 期 
限 之 内 仍然 没有 执行 完毕 ， 则 ASP 将 终止 执行 并 显示 超时 错误 。 默 认 脚本 超时 时 限 为 
90s， 通 常 该 期 限 值 足够 让 ASP 页 面 执行 完毕 。 

例如 ， 通 过 ScriptTimeout 属性 设置 脚本 超时 期 限 为 10s， 然 后 创建 一 个 持续 20s 的 
循环 ， 这 显然 超出 了 脚本 运行 的 时 间 期 限 ， 因 此 执行 该 页 面 时 会 出 现 脚本 超时 错误 ， 代 
码 如 下 所 示 。 


< 



































方法 CreateObjectO 





方法 GetLastError 


Server.ScriptTimeout=10 

Dim myTime 

mtTime=time () 

Do while DateDiff("s",myTime,time()) < 10 


Loop 
Response .Write "对 不 起 ， 该 页 面 的 脚本 程序 已 经 超过 20 秒 的 时 间 限 制 " 
$%> 
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使 用 Session 对 象 可 以 存储 特定 的 用 户 会 话 所 需 的 信息 。 当 用 户 在 应 用 程序 的 不 同 
页 面 之 间 切 换 时 ,存储 在 Session 对 象 中 的 变量 不 被 清除 , 而 用 户 在 应 用 程序 中 访问 页 时 ， 
这 些 变量 始终 存在 也 可 以 使 用 Session 方法 显 式 地 结束 一 个 会 话 和 设置 空闲 会 话 的 超时 
时 限 。 


1. Session 对 象 成 员 

















Session 对 象 拥有 与 Application 对 象 相同 的 集合 ， 并 具有 一 些 其 他 属性 。Session 对 
象 成 员 介绍 如 表 11-10 所 示 。 


人 2 表 11-10_Session 对 象 成 员 


Session 对 象 成 员 说 明 
集合 Contents | 存储 于 Application 对 象 中 的 所 有 变量 的 
集合 StaticObject 使 用 <objecf> 元 素 定义 的 存储 于 Application 对 象 中 的 所 有 变量 的 集合 
属性 CodePage 定义 用 于 浏览 器 中 显示 页 内 容 的 代码 页 
属性 SessionID 返回 会 话 标识 符 ， 创 建 会 话 时 由 服务 器 产生 
属性 Timeout 定义 会 话 超时 周期 (以 分 钟 为 单位 》 


方法 Content.Remove() 移 除 Contents 集合 中 的 某 个 变量 

方法 Content.RemoveAll() | 移 除 Contents 集合 中 的 所 有 变量 

方法 Abandon0) 网 页 执行 完 时 结束 会 话 并 撤销 当前 的 Session 对 象 
事件 OnStart 当 ASP 启动 时 触发 ， 在 网 页 执行 之 前 和 任何 Session 创建 之 前 发 生 
事件 OnEnd 当 ASP 应 用 程序 结束 时 触发 








Session 对 象 多 用 于 保存 用 户 会 话 级 的 变量 。 当 一 个 未 创建 Session 对 象 的 用 户 访问 
Web 站 点 的 ASP 页 面 时 ，ASP 就 会 自动 生成 一 个 新 的 Session 对 象 ， 并 指定 唯一 的 
SessionID 编号 。 


2. 使 用 Session 对 象 


Session 对 象 是 附属 于 用 户 的 ， 所 以 每 位 用 户 都 可 以 拥有 其 专用 的 Session 变量 。 虽 
然 每 位 用 户 的 Session 变量 名 称 相 同 , 但 是 其 值 是 不 相同 的 , 并 且 只 有 该 用 户 有 权 对 自己 
的 Session 变量 进行 读 写 操作 。 

例如 ， 在 Filel.asp 动态 页 面 中 使 用 Session 对 象 创建 5 个 变量 ， 这 5 个 变量 用 于 存 
储 商品 的 信息 ， 包 括 商品 的 编号 、 名 称 、 规 格 、 数 量 和 类 别 ， 代 码 如 下 所 示 。 


<% 

Session ("CNum") = "X001"™ 

Session ("CName") = " 男 式 衬衫 " 
Session ("CSpecification ") = "175" 
Session("CcTotal") = 100 

Session ("CType") = "衬衫 " 





$%> 


然后 , 在 男 一 个 动态 页 面 File2.asp 中 , 不 需要 使 用 Request 对 象 即 可 获取 Session 变 
量 中 的 值 , 就 可 以 使 用 Response .Write() 方 法 将 获取 的 值 输出 到 浏览 器 上 , 代码 如 下 所 示 。 











编号 : <$= Session ("CNum ")$%> 

名 称 : <$= Session ("CName ")$%> 

规格 : <$= Session("CSpecification ")%> 
数量 : <%= Session ("CTotal ")%> 

类 别 : <%$= Session ("CType ")%> 





使 用 ObjectContext 对 象 可 以 提交 或 放弃 一 项 由 Microsoft Transaction Server (MTS) 
管理 的 事务 。MTS 是 以 组 件 为 主 的 事务 处 理 系 统 , 可 用 来 进行 开发 、 拓 展 及 管理 高 效能 、 
可 伸缩 及 功能 强大 的 服务 器 应 用 程序 ， 所 以 Microsoft 也 在 ASP 中 增加 了 新 的 内 部 对 象 
ObjectContext， 以 使 编程 人 员 在 设计 Web 页 面 程序 中 直接 应 用 MTS 的 形式 。 


1. ObjectContext 对 象 成 员 


ObjectContext 对 象 用 于 中 止 或 者 提交 当前 的 事务 ， 该 对 象 没 有 属性 ， 只 有 用 于 中 止 
或 提交 事务 的 方法 及 所 触发 的 事件 。ObjectContext 对 象 成 员 介绍 如 表 11-11 所 示 。 
人 22 表 11-11 _ ObjectContext 对 象 成 员 







ObjectContext 对 象 成 员 

将 当前 的 事务 标记 为 中 止 ， 当 脚本 结束 时 将 取消 参与 此 事物 的 全 部 
操作 

将 当前 事务 标记 为 提交 ， 在 脚本 结束 时 如 果 没 有 其 他 的 COM+ 对 象 
中 止 事务 ， 参 与 事务 的 操作 将 全 部 提交 

事件 OnTransactionAbort 当 脚 本 创建 的 事务 中 止 后 ， 将 触发 OnTransactionAbort 事件 
事件 OnTransactionCommit “| 当 脚 本 所 创建 的 事务 成 功 提交 后 ， 将 触发 OnTransactionCommit 事件 





方法 SetAbort 







2. 使 用 ObjectContext 对 象 





ObjectContext 对 象 提供 的 SetAbort 方法 将 立即 终止 目前 网 页 所 进行 的 事务 处 理 ， 但 
该 次 事务 处 理 被 声明 为 失败 ， 所 有 处 理 的 数据 都 无 效 ，SetComplete 方法 将 终止 目前 网 页 
所 进行 的 事务 处 理 ， 如 果 事务 中 的 所 有 组 件 都 调用 SetComplete 方法 ， 事 务 将 完成 ， 所 
有 处 理 的 数据 都 有 效 。SetComplete 方法 和 SetAbort 方法 的 使 用 方法 如 下 所 示 。 














ObjectContext .SetComplete 
"SetComplete 方法 
ObjectContext .SetRbort 
'SetAbort 方法 


ObjectContext 对 象 提供 了 OnTransactionCommit 和 OnTransactionAbort 两 个 事件 处 理 
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程序 ， 前 者 是 在 事务 完成 时 被 激活 ， 后 者 是 在 事务 失败 时 被 激活 ， 其 使 用 方法 如 下 所 示 。 
Sub OnTransactionCommit () 
"处 理 程序 
End Sub 
Sub OnTransactionAbort () 
"处 理 程 序 
End Sub 


11.4 数据 库 基础 





ASP 是 编写 数据 库 应 用 程序 的 杰出 语言 ， 它 提供 了 方便 访问 数据 库 的 技术 。 利 用 
ADO 组 件 技术 ,用户 能 方便 地 开发 不 同 的 应 用 程序 ， 对 数据 进行 管理 和 维护 操作 。 本 节 
将 以 Access 数据 库 为 例 ， 使 用 ADO 组 件 技术 对 数据 库 进 行 管理 和 维护 操作 。 





ActiveX Data Objects (ADO) 是 一 项 容易 使 用 ， 并 且 可 扩展 的 将 数据 库 访 问 添加 到 
Web 页 的 技术 。 可 以 使 用 ADO 去 编写 紧凑 简明 的 脚本 以 便 连接 到 Open DataBase 
Connectivity (ODBC) 兼容 的 数据 库 和 OLE DB (OLE DB 是 一 种 技术 标准 ， 目 的 是 提 
供 一 种 统一 的 数据 访问 接口 )。 

1. ASP 与 数据 库 


ASP 程序 对 数据 库 的 整个 访问 过 程 : 客户 端的 浏览 器 向 Web 服务 器 提出 ASP 页 面 
文件 请 求 ， 服 务 器 对 该 页 面 进行 解释 ， 并 在 服务 器 端 运行 ， 完 成 数据 库 的 操作 ， 再 把 数 
据 库 操作 的 结果 生成 的 网 页 返回 给 浏览 器 ， 浏 览 器 再 将 该 网 页 内 容 显示 在 客户 端 ， 如 
图 11-1 所 示 。 

ASP 是 通过 一 组 被 称 为 ADO 的 对 象 模块 来 访问 数据 库 的 , 而 ADO 是 在 OLE DB 技 
术 的 基础 上 实现 的 。 在 OLE DB 中 ， 数 据 的 交换 是 在 数据 使 用 者 (Data Consumers) 和 
数据 提供 者 (Data Provider) 之 间 进 行 的 。 

连接 应 用 程序 和 OLE DB 的 桥梁 就 是 ADO 对 象 。ADO 是 一 个 OLE DB 的 使 用 者 ， 
它 提供 了 对 OLE DB 数据 源 的 应 用 程序 级 访问 。 


2. ADO 组 件 简介 


ADO 组 件 主要 由 Connection 对 象 、Command 对 象 、 Parameter 对 象 、Recordset 对 象 、 
Field 对 象 、Property 对 象 及 Error 对 象 7 个 对 象 与 Fields 数据 集合 、Properties 数据 集合 、 
Parameters 数据 集合 及 Error 数据 集合 4 个 数据 集合 组 成 ， 如 图 11-2 所 示 。 

ADO 组 件 的 具体 功能 简 述 如 下 所 示 。 

口 Connection 对 象 负 责 与 指定 的 数据 源 进行 连接 , 还 可 以 通过 一 些 方法 对 数据 源 

进行 事务 管理 。 
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OLE DB 的 数据 库 驱 动 程序 





非 关系 数据 库 其 他 数据 库 ( 如 Excel 表 格 等 ) 


上 了 图 11-1 ASP 访问 数据 库 流程 图 








Recordset 对 象 





Command 对 象 


ra Lo 
和 图 11-2 ADO 组 件 简介 


口 Command 对 象 负 责 对 数据 库 提出 请 求 ， 传 递 指 定 的 SQL 命令 。 
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口 Parameter 对 象 负责 传递 Command 对 象 所 需要 的 命令 参数 。 
口 Recordset ”对象 负责 浏览 从 数据 库 取 出 的 数据 。 
口 Field 对 象 指定 Recordset 对 象 的 数据 字段 。 
口 Property 对 象 表 示 ADO 的 各 项 对 象 属性 值 。 
口 Error 对 象 负责 记录 连接 过 程 所 发 生 的 错误 信息 。 

虽然 ADO 组 件 提供 了 7 个 对 象 和 4 个 数据 集合 ， 但 是 从 实际 的 应 用 中 ， 最 常用 的 
对 象 只 有 3 个 ， 那 就 是 Connection 对 象 、Recordset 对 象 和 Command 对 象 ， 这 些 对 象 涵 
盖 了 数据 库 连接 、 简 单 查询 、 控 制 查询 数据 、 增 加 记录 、 修 改 记 录 和 删除 记录 等 主要 功 
能 的 使 用 。 





ADO 被 设计 来 继承 微软 早期 的 数据 访问 对 象 层 ， 包 括 RDO (Remote Data Objects) 
和 DAO (Data Access Objects)。ADO 包含 一 些 顶 层 的 对 象 ， 如 连接 、 记 录 集 、 命 令 、 记 
录 等 。 


1. Command 对 象 


ADO Command 对 象 用 于 执行 面向 数据 库 的 一 次 简单 查询 , 此 查询 可 执行 诸如 创建 、 
添加 、 取 回 、 删 除 或 更 新 记录 等 操作 。 

使 用 Command 对 象 查询 数据 库 并 返回 Recordset 对 象 中 的 记录 ， 以 便 执 行 大 量 操 作 
或 处 理 数据 库 结 构 。 Command 对 象 的 主要 特性 是 有 了 能力 使 用 存储 查询 和 带 有 参数 的 存储 
过 程 ， 其 创建 方法 如 下 所 示 : 

set objCommand=Server.CreateObject ("ADODB.Command") 


使 用 Command 对 象 的 集合 、 方 法 和 属性 可 以 进行 下 列 操作 。 

口 使 用 CommandText 属性 定义 命令 (例如 ，SQL 语句 ) 的 可 执行 文本 。 

口 通过 Parameter 对 象 和 Parameters 集合 定义 参数 化 查询 或 存储 过 程 参数 。 

口 可 使 用 Execute 方法 执行 命令 并 在 适当 的 时 候 返 回 Recordset 对 象 。 

口 执行 前 应 使 用 CommandType 属性 指定 命令 类 型 以 优化 性 能 。 

口 使 用 Prepared 属性 决定 提供 者 是 否 在 执行 前 保存 准备 好 ( 或 编译 好 ) 的 命令 版 本 。 
口 使 用 CommandTimeout 属性 设置 提供 者 等 待命 令 执行 的 秒 数 。 

口 通过 设置 ActiveConnection 属性 使 打开 的 连接 与 Command 对 象 关 联 。 

口 设置 Name 属性 将 Command 标识 为 与 Connection 对 象 关联 的 方法 。 

口 将 Command 对 象 传送 给 Recordset 的 Source 属性 以 便 获取 数据 。 











2. Connection 对 象 


ADO Connection 对 象 用 于 创建 一 个 到 达 某 个 数据 源 的 开放 连接 。 通 过 该 连接 ， 可 以 
对 一 个 数据 库 进行 访问 和 操作 。 

如 果 需 要 多 次 访问 某 个 数据 库 ， 则 应 当 使 用 Connection 对 象 建立 一 个 连接 。 当 然 ， 
也 可 以 由 一 个 Command 或 Recordset 对 象 传递 一 个 连接 字符 串 来 创建 某 个 连接 。 不 过 ， 
此 连接 仅仅 适合 一 次 具体 的 简单 查询 。Connection 对 象 创建 方法 如 下 所 示 : 


set objConnection=Server.CreateObject ("ADODB.Connection") 


使 用 Connection 对 象 的 集合 、 方 法 和 属性 可 以 执行 下 列 操作 。 

口 在 打开 连接 前 使 用 ConnectionString、ConnectionTimeout 和 Mode 属性 对 连接 进 
行 配 置 。 

口 设置 CursorLocation 属性 以 便 设置 或 返回 游标 服务 的 位 置 。 

口 使 用 DefaultDatabase 属性 设置 连接 的 默认 数据 库 。 

口 使 用 IsolationLevel 属性 为 在 连接 上 打开 的 事务 设置 隔离 级 别 。 

口 使 用 Provider 属性 指定 OLE DB 提供 者 的 名 称 。 

口 使 用 Open 方法 建立 到 数据 源 的 物理 连接 。 使 用 Close 方法 将 其 断 开 。 

口 使 用 Execute 方法 执行 对 连接 的 命令 ， 并 使 用 CommandTimeout 属性 对 执行 进行 
配置 。 

口 可 使 用 BeginTrans、CommitTrans 和 RollbackTrans 方法 以 及 Attributes 属性 管理 
打开 的 连接 上 的 事务 ( 如 果 提 供 者 支持 则 包括 谨 套 的 事务 )。 

口 使 用 Errors 集合 检查 数据 源 返回 的 错误 。 

口 通过 Version 属性 读 取 使 用 中 的 ADO 执行 版 本 。 

口 使 用 OpenSchema 方法 获取 数据 库 模 式 信息 。 
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3. Recordset 对 象 


ADO Recordset 对 象 表示 来 自 基本 表 或 命令 执行 结果 的 记录 全 集 。 无 论 何 时 ， 
Recordset 对 象 所 指 的 当前 记录 均 为 集合 内 的 单个 记录 。 一 个 Recordset 对 象 由 记录 ( 行 ) 
和 字段 ( 列 ) 组 成 。 

在 ADO 中 ，Recordset 对 象 是 最 重要 且 最 常用 于 对 数据 库 的 数据 进行 操作 的 对 和 象 ， 
其 创建 方法 如 下 所 示 : 


set objRecordset=Server.CreateObject ("ADODB.Recordset") 


当 首 次 打开 一 个 Recordset 时 ， 当 前 记录 指针 将 指向 第 一 个 记录 ， 同 时 BOF 和 EOF 
属性 为 false。 如 果 没 有 记录 ，BOF 和 EOF 属性 为 tue。Recordset 对 象 能 够 支持 两 种 更 
新 类 型 。 





口 立即 更 新 一 旦 调用 Update 方法 ， 所 有 更 改 被 立即 写 入 数据 库 。 

口 批 更 新 Provider 将 缓存 多 个 更 改 ， 然 后 使 用 UpdateBatch 方法 把 这 些 更 改 传送 

到 数据 库 。 

在 ADO 中 ， 定 义 了 4 种 不 同 的 游标 类 型 。 

口 动态 游标 ”用 于 查看 其 他 用 户 所 做 的 添加 、 更 改 和 删除 。 

口 键 集 游标 ”类似 动 态 游标 , 不同 的 是 无 法 查看 由 其 他 用 户 所 做 的 添加 ， 并 且 会 禁 

止 访问 其 他 用 户 已 删除 的 记录 ， 其 他 用 户 所 做 的 数据 更 改 仍然 是 可 见 的 。 

口 静态 游标 ”提供 记录 集 的 静态 副本 ， 以 查找 数据 或 生成 报告 。 此外， 由 其 他 用 户 
所 做 的 添加 、 更 改 和 删除 将 不 可 见 。 这 是 打开 客户 端 Recordset 对 象 时 唯一 允许 

使 用 的 游标 类 型 。 

口 仅 向 前 游标 只 允许 在 Recordset 中 向 前 滚动 。 此 外 ， 由 其 他 用 户 所 做 的 添加 、 
更 改 和 删除 将 不 可 见 。 








4. Field 对 象 


ADO Field 对 象 包 含有 关 Recordset 对 象 中 某 一 列 信息 。 每 个 Field 对 象 对 应 于 
Recordset 中 的 一 列 。Field 对 象 的 创建 方式 如 下 所 示 : 


set objField=Server.CreateObject ("ADODB.Field") 


使 用 Field 对 象 的 集合 、 方 法 和 属性 可 进行 如 下 操作 。 

口 使 用 Name 属性 可 返回 字段 名 。 

口 使 用 Value 属性 可 查看 或 更 改 字段 中 的 数据 。 

口 使 用 Type、Precision 和 NumericScale 属性 可 返回 字段 的 基本 特性 。 

口 使 用 DefinedSize 属性 可 返回 已 声明 的 字段 大 小 。 

口 使 用 ActualSize 属性 可 返回 给 定 字 段 中 数据 的 实际 大 小 。 

口 使 用 Attributes 属性 和 Properties 集合 可 决定 对 于 给 定 字段 哪些 类 型 的 功能 受到 
支持 。 

口 使 用 AppendChunk 和 GetChunk 方法 可 处 理 包含 长 整 型 二 进 制 或 长 字符 数据 的 字 
段 值 。 

口 如 果 提 供 者 支持 批 更 新 ， 可 使 用 OriginalValue 和 UnderlyingValue 属性 在 批 更 新 
期 间 解决 字段 值 之 间 的 差异 。 

在 打开 Field 对 象 的 Recordset 前 ， 所 有 元 数据 属性 (Name、Type、DefinedSize、 

Precision 和 NumericScale) 都 是 可 用 的 , 在 此 时 设置 这 些 属性 将 有 助 于 动态 构造 其 格式 。 


5. Error 对 象 


ADO Eror 对 象 包含 与 单个 操作 〈 涉 及 提供 者 ) 有 关 的 数据 访问 错误 的 详细 信息 。 
ADO 会 因为 每 次 错误 产生 一 个 Error 对 象 ， 每 个 Error 对 象 包含 具体 错误 的 详细 信 
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息 ， 且 Error 对 象 被 存储 在 Errors 集合 中 。 当 另 一 个 ADO 操作 产生 错误 时 ，Errors 集合 
将 被 清空 ， 并 在 其 中 存储 新 的 Error 对 象 集 。 通 过 Error 对 象 的 属性 可 获得 每 个 错误 的 详 
细 信 息 ， 其 中 包括 以 下 内 容 。 
口 Description 属性 包含 错误 的 文本 。 
口 Number 属性 包含 错误 常量 的 长 整 型 整数 值 。 
口 Source 属性 ”标识 产生 错误 的 对 象 。 在 向 数据 源 发 出 请 求 之 后 ,如 果 Errors 集合 
中 有 多 个 Error 对 象 ， 则 将 会 用 到 该 属性 。 
口 SQLState 和 NativeError 属性 ”提供 来 自 SQL 数据 源 的 信息 。 

ADO 支持 由 单个 ADO 操作 返回 多 个 错误 ， 以 便 显 示 特 定 提供 者 的 错误 信息 。 如 果 
要 在 错误 处 理 程 序 中 获得 丰富 的 错误 信息 ， 可 使 用 相应 的 语言 或 所 在 工作 环境 下 的 错误 
捕获 功能 ， 然 后 使 用 嵌 套 循环 枚 举 出 Errors 集合 的 每 个 Error 对 象 的 属性 ， 代 码 如 下 。 


< 
For Each objErr In objConn.Errors 
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Response.WFite ("<p>") 

Response.Write ("Description: ") 
Response.Write (objErr.Description & "<br />") 
Response.Write ("Help context: ") 
Response.Write (objErr.HelpContext & "<br />") 
Response.Write ("Help file: ") 

Response.Write (objErr.HelpFile & "<br />") 
Response.Write ("Native error: ") 
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Response.Write (objErr.NativeError & "<br />") 
Response.Write ("Error number: ") 
Response.Write (objErr.Number & "<br />") 
Response.Write ("Error source: ") 
Response.Write (objErr.Source & "<br />") 
Response.Write("sQL state: ") 

Response.Write (objErr.SOLState & "<br />") 
Response.WFite ("</p>") 

Next 

$> 





6. Parameter 对 象 


ADO Parameter 对 象 可 提供 有 关 被 用 于 存储 过 程 或 查询 中 的 一 个 单个 参数 的 信息 。 

了 Parameter 对 象 在 其 被 创建 时 被 添加 到 Parameters 集合 。Parameters 集合 与 一 个 具体 
的 Command 对 象 相 关联 ，Command 此 集合 在 存储 过 程 和 查询 内 外 传递 参数 。 

参数 被 用 来 创建 参数 化 的 命令 ， 这 些 命令 (在 它们 已 被 定义 和 存储 之 后 ) 使 用 参数 
在 命令 执行 前 来 改变 命令 的 某 些 细节 。 pm SQL SELECT 语句 可 使 用 参数 定义 WHERE 
子 句 的 匹配 条 件 ， 而 使 用 另 一 个 参数 来 定义 SORT BY 子 句 的 列 名 称 。 使 用 Parameter 对 
象 的 集合 、 方 法 和 属性 可 进行 如 下 操作 。 
口 使 用 Name 属性 可 设置 或 返回 参数 名 称 。 
口 使 用 Value 属性 可 设置 或 返回 参数 值 。 
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口 使 用 Attributes 和 Direction、Precision、NumericScale、Size 以 及 Type 属性 可 设 
置 或 返回 参数 特性 。 
口 使 用 AppendChunk 方法 可 将 长 整 型 二 进 制 或 字符 数据 传递 给 参数 。 


7. Property 对 象 


ADO 对 象 有 两 种 类 型 的 属性 , 即 内 置 属性 和 动态 属性 。 ADO Property 对 象 用 来 代表 
由 提供 者 定义 的 ADO 对 象 的 动态 特征 。 

内 置 属 性 是 在 ADO 中 实现 并 立即 可 用 于 任何 新 对 象 的 属性 ， 此 时 使 用 
MyObject.Property 语法 。 它 们 不 会 作为 Property 对 象 出 现在 对 象 的 Properties 集合 中 , 因 
此 ， 虽 然 可 以 更 改 它 们 的 值 ， 但 无 法 更 改 它 们 的 特性 。 

动态 属性 由 基本 的 数据 提供 者 定义 ， 并 出 现在 相应 ADO 对 象 的 Properties 集合 中 。 
例如 , 指定 给 提供 者 的 属性 可 能 会 指示 Recordset 对 象 是 否 支持 事务 或 更 新 。 这 些 附加 的 
属性 将 作为 Property 对 象 出 现在 该 Recordset 对 象 的 Properties 集合 中 。 动 态 Property 对 
象 有 4 个 内 置 属性 。 

口 Name 属性 是 标识 属性 的 字符 串 。 

口 Type 属性 是 用 于 指定 属性 数据 类 型 的 整数 。 

口 Value 属性 是 设置 或 返回 一 个 Property 对 象 的 值 。 

口 Attributes 属性 是 指示 特定 于 提供 者 的 属性 特征 的 长 整 型 值 。 

















动态 网 页 最 重要 的 是 后 台数 据 库 。 更 新 网 页 信息 ， 都 需要 从 后 台数 据 库 调 用 。 对 于 
网 页 内 容 的 添加 、 修 改 、 删 除 等 操作 ， 都 建立 在 网 页 与 后 台数 据 库 连 接 的 基础 上 。 所 以 
连接 数据 库 在 网 站 制作 过 程 中 占有 很 重要 的 位 置 。 


1. ASP 脚本 连接 Access 数据 库 


利用 ASP 可 以 非常 容易 地 把 HTML 文本 、 脚 本 命令 以 及 ActiveX 组 件 混合 在 一 起 
构成 ASP 页 ， 以 此 来 生成 动态 网 页 ， 创 建交 互 式 的 Web 站 点 ， 实 现 对 Web 数据 库 的 访 
问 和 管理 。 下 面 使 用 ASP 脚本 命令 连接 名 称 为 data.accdb 数据 库 ， 代 码 如 下 所 示 。 


< 
dim conn,connstr,db "声明 变量 
db = "data.accdb" "数据 库 文件 地 址 


Set conn = Server.CreateObject ("ADODB.Connection") 
"创建 ADODB .Connection 对 象 
connstr = "Provider=microsoft.ACE.oledb.12.0;Data Source="& Server. 
MapPath(""gdbg"") 
"声明 变量 connstr 的 值 为 数据 库 驱 动 程序 和 数据 库 文件 地 址 
conn.Open connstr ' 使 用 Open 方法 连接 数据 库 
If Err Then 
' 如 果 连 接 数 据 库 过 程 出 现 错误 
err.Clear "将 错误 清除 


Call CloseConn "调用 CloseConn 过 程 
Response.Write "数据 库 连接 出 错 ， 请 检查 Conn .asp 中 的 数据 库 指向 。" 
"在 浏览 器 窗口 中 输出 字符 串 
Response-End() "停止 输出 结果 
End If 
sub CloseConn() 
"创建 CloseConn 过 程 
conn.close "关闭 连接 数据 库 
set conn=nothing "设置 变量 conn 的 值 为 空 
end sub 
%> 


上 面 代 码 连接 的 Access 数据 库 为 2007 版 ， 因 此 ， 需 要 使 用 应 用 于 该 版 本 数据 库 的 


“microsoft.ACE.oledb.12.0” 驱 动 程序 。 | 
2，ASP 脚本 连接 SQL Server 数据 库 区 
> 
ASP 脚本 除了 可 以 连接 Access 数据 库 之 外 ， 还 可 以 连接 大 型 的 SQL Server 数据 库 。 
与 连接 Access 数据 库 的 方法 基本 相同 ， 只 是 改变 了 数据 库 的 连接 驱动 。 下 面 使 用 ASP 委 
脚本 命令 连接 名 称 为 data 数据 库 ， 代 码 如 下 所 示 。 后 
二 中 
dim conn,connstr,db 
"声明 变量 


Set conn = Server.CreateObject ("ADODB.Connection") 

"创建 ADODB .Connection 对 象 

connstr = "driver={SQL Server};server=MFJ;uid=sa;pwd=;database=bbs" 
"声明 变量 connstr 的 值 为 数据 库 驱 动 程序 、 服 务 器 名 称 、 用 户 名 、 密 码 和 数据 库 名 称 
conn.Open connstr 

"使 用 Open 方法 连接 数据 库 


%> 


在 connstr 变量 中 存储 的 值 是 连接 SQL Server 数据 库 的 重要 信息 ， 其 各 个 参数 如 下 
所 示 。 
口 driver 指定 数据 库 连 接 驱 动 。 
serVer 指定 要 连接 SQL Server 服务 器 的 名 称 。 
uid 输入 服务 器 用 户 名 。 
pwd 输入 服务 器 密码 。 
database 指定 数据 库 名 称 。 








口 
| 
口 
口 





11.5 课堂 练习 : 制作 简单 留言 短 


通常 ， 在 制作 留言 短 网 页 时 ， 需 要 将 表单 数据 提交 到 数据 库 ， 再 从 数据 库 中 读 取出 
来 。 这 样 一 来 ， 制 作 起 来 相对 复杂 一 些 。 此 时 ， 可 以 使 用 HTML 代码 ， 直 接 通过 本 地 存 
储 的 优势 创建 简单 的 留言 每 ， 如 图 11-3 所 示 。 
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和 图 1-3 .简单 留言 簿 网 页 


操作 步 又 : 
创建 index.html 文件 ， 在 <body> 标 签 中 插入 <h1> 和 <form> 标 签 ， 以 及 标签 内 容 ， 其 具体 代码 如 


下 所 述 。 





在 <style> 标 签 中 , 添加 对 <form> 表 单 的 样式 设置 , 如 文本 、 定 位 、label 标签 样式 、input 样式 等 ， 
其 具体 代码 如 下 所 述 。 





在 <form> 标 签 下 面 , 添加 对 本 地 存储 的 JavaScript 代码 。 并 将 表单 提交 的 内 容 添 加 到 本 地 存储 数 
据 库 中 ， 然 后 ， 再 读 取 数据 ， 并 显示 到 网 页 中 。 具 体 代码 如 下 所 述 。 











由 于 在 JavaScript 代码 中 ， 通 过 代码 添加 了 id 为 datalist 的 <dl> 标 签 。 所 以 ， 在 <style> 标 签 中 ， 
可 以 为 其 标签 添加 样式 效果 。 其 具体 代码 如 下 所 述 。 








住 
教 
程 
ND 
3 
oo 
U 
局 
已 
上 





.datalist dd { 
min-height:30px; 
line-height: 24px; 
text-indent :2em; 

} 

.datalist time { 
Flont: Tight? 

} 


练习 : 创建 学 生 信息 数据 库 








制作 一 个 动态 网 站 ， 不 仅 要 用 ASP 进行 动态 网 页 设计 ， 还 要 利用 ASP 进行 动态 数 
据 查 询 。 通 常 ， 使 用 Access 类 型 数据 库 在 网 页 中 进行 查询 。 在 本 练习 中 ， 将 通过 创建 一 
个 关于 学 生 信息 的 数据 库 ， 来 详细 介绍 创建 数据 库 的 操作 方法 ， 如 图 11-4 所 示 。 


学 号 。 +- 
所 有 Ac |o411002 郑 晓 明 
eR 全 [os12001 周 暑 机 
甫 人 |0426001 虫 虫 
国 学 生 信息 表 |0426002 史 艳 娇 
|0502001 刘 同 斌 
|0502002  ” 吴 兆 玉 
| 0503001 何 利 
_ 0504001 宛 叶 
|0504002 孙 明 
|0601001 史 观 田 
0601002 页 庆 华 
|0603001 黎明 
|0603002 孙 晓 红 
|0605001 和 孙 盛 
“10606001 高 升 鹃 


记录 :4 4| 第 24 项 共 241 HA 


和 图 11-4 ,学 生 信息 数据 库 


操作 步骤 : 
启动 Access 组 件 ， 创 建 空 白 数 据 库 。 右 击 
ID 字段 ， 执 行 【 重 命名 字段 】 命令 ， 如 图 




























11-5 所 示 。 
国 事 1 一 口 x 
LE. 2 
类 了 沿革 结 所 有 闻 自 (A) 
四 右 击 本 
La] 
回执 行 | ; 和 
mes#mYy _] 
记 如 “第 1 项 共 1 项 ，M， | 到 天 二 过 过 | 搜索 








和 图 11-5 _ 重 命名 字段 
在 字段 名 称 框 中 , 输入 新 的 字段 名 称 , 单 击 


性 别 -| 出 生年 月 -| 专业 编号 “| 年 级 
女 1985-02-05 052 04 专 升 本 
女 1983-06-04 032 04 专 升 本 
男 1982-04-26 012 04 本 | 
女 1985-05-08 021 06 本 | 
男 1984-11-11 031 05 本 
女 1983-01-07 031 05 本 
女 1987-08-05 042 05 本 
女 1981-11-12 021 05 本 
女 1982-05-12 022 05 本 
男 1985-04-13 051 06 本 
男 1986-11-25 053 06 本 
i 1985-08-07 041 06 本 
女 1984-12-02 042 06 本 
男 1983-07-05 011 06 本 
男 1983-04-06 062 06 本 > 
不 无 远 器 | 搜索 4 ] Dl | 





其 他 位 置 即 可 ， 如 图 11-6 所 示 。 














国 要 1 = 总” 沈 
E2777 

bd (新 建 ) 

记录 : MH | 各 天 过 二 | 搜索 








& 7 图 11-6 输入 字段 


选择 【学 号 】 字段 列 ， 执 行 【表格 工具 】| 
【字段 ] 1[ 格式 】 |【 数据 类 型 ] 命令 ,在 其 
列表 中 选择 [ 短文 本 ] 选 项 , 设置 字段 格式 ， 


如 图 11-7 所 示 。 





国 素 1 
并 直 以 睛 加 ， 


9 




















记 如 4 了 第 1 项 共 1 项 ， 上 开 天 汪 大 ， 秆 过 


和 图 11-7 设置 字段 格式 





单 击 【 单 击 以 添加 】 字段 后 的 下 拉 按钮 ， 在 
列表 中 选择 【 短文 本 ] 选项 ， 添 加 一 个 文本 
字段 ， 如 图 11-8 所 示 。 











县 /二 
投下 网关 系 册 
Aa 相 式 文 二 09 









1 项 并 1 匣 ”| 下 天 区 | 注 襟 


和 | 图 11-8 ,添加 文本 字段 
此 时 ,系统 会 增加 一 个 新 字段 ， 用 户 只 需 输 


入 新 的 字段 名 称 ， 单 击 其 他 位 置 即 可 ,如 图 
11-9 所 示 。 














学 号 -姓名 | 学 击 以 项 加 - 











本 ET 二 二 IF] 
人 了 图 11-9 .输入 字段 名 称 


加 使 用 同样 的 方法 , 依次 添加 性 别 、 出 生年 月 、 
专业 编号 和 年 级 字段 ， 如 图 11-10 所 示 。 

选择 【 学 号 ] 字段 列 中 的 第 1 个 单元 格 , 输 
入 “0411002” 数 据 ， 如 图 11-11 所 示 。 














"1 而 "| 下 天 2 吕 搜索 DID 


和 了 图 11-10 输入 其 他 字段 


习 到 1 = 区 演 
6 可 本 -| 对 名 ”| 性别 -| 员 王 年 月 “| 专业 编 
大 oalooa 

国 


[ECTEY TE .TSE EOI E73 ED 


《了 图 11-1 添加 学 号 数据 


图 按 下 Tab 键 ,选择 [ 姓名 】 字段 列 中 的 第 1 
个 单元 格 ， 输 入 学 生 姓 名 ， 如 图 11-12 所 
示 。 使 用 同样 方法 , 依次 输入 其 他 字段 内 容 。 











国 要 1 口 X 
” 性别 -| 出 生年 月 .| 专业 编 





| 字号 -| 多 名 
用 0311002 郑 晓 明 
加 


和 图 11-12 添加 姓名 数据 


图 单 击 [ 快速 访问 工具 栏 ] 中 的 【 保存 ] 按钮 ， 
输入 表 名 称 ， 单 击 【 确定 ] 按钮 即 可 ， 如 图 
11-13 所 示 。 























& 图 11-13 保存 数据 库 


三 小 
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1. 是 一 种 服务 器 端的 网 页 设计 
技术 ， 可 以 将 Script 语法 直接 加 入 到 HTML 网 
页 中 。 

2. 会 话 跟踪 维护 由 单个 客户 端 发 布 的 一 组 


请 求 信 息 ， 可 以 使 用 指令 关闭 网 页 会 
话 跟踪 。 
3. 用 户 可 以 用 指令 设置 用 于 解 


释 脚 本 中 的 命令 语言 ， 可 以 将 脚本 语言 设置 为 任 
何 一 种 已 安装 在 IS 中 的 脚本 引擎 。 

4. 方法 有 一 个 缺点 就 是 URL 字 
符 串 的 长 度 在 被 浏览 器 及 服务 器 使 用 时 有 一 些 限 
制 ， 而 且 会 将 某 些 希 望 隐藏 的 数据 暴露 出 来 。 

5. 对 象 提供 了 一 系列 的 方法 , 用 
于 直接 处 理 返回 给 客户 端 而 创建 的 页 面 内 容 。 

6. 如 果 将 设置 为 TRUE， 那 么 使 
用 方法 可 以 删除 缓冲 区 中 的 所 有 
HTML 输出 。 

和 被 设计 来 继承 微软 早期 的 数据 
访问 对 象 层 ， 包 括 RDO (Remote Data Objects) 
和 DAO (Data Access Objects)。 








二 、 选 择 题 
1. 在 ASP 中 处 在 中 的 可 以 是 任意 
的 字符 、 字 符 申 、XHTML 代码 。 
A. 双 引 号 〈"") 
B. 单 引号 (") 
C. 连接 字符 (&) 
D. 冒号 
2. 在 声明 常量 时 ， 为 防止 常量 和 变量 的 混 
活 ， 通 常 在 常量 前 加 或 con 的 前 级 。 
A. VS B. VB 
Ge D. CC 
3. VBScript 的 数据 类 型 为 ， 是 一 种 


特殊 的 数据 类 型 ， 根 据 使 用 方式 的 不 同 ， 可 以 包 
含 各 种 信息 。 


A. Long B. Boolean 
C. Variant D. Double 
4. 的 作用 是 对 一 个 或 多 个 条 件 进行 


判断 ， 根 据 判断 的 结果 执行 相关 的 语句 。 


A. 条 件 语句 B. 循环 语句 
C. 筛选 语句 D. 排序 语句 
所 对 象 用 于 执行 面向 数据 库 的 一 次 
简单 查询 ， 此 查询 可 执行 诸如 创建 、 添 加 、 取 回 、 
删除 或 更 新 记录 等 操作 。 
A. ADO Connection 
B. ADO Command 
C. ADO Recordset 
D. ADO Field 
6. 对 象 用 于 中 止 或 者 提交 当前 的 事 
务 ， 该 对 象 没有 属性 ， 只 能 用 于 中 止 或 提交 事务 
的 方法 及 所 触发 的 事件 。 
A. Server 
B. Session 
C. ObjectContext 
D. Application 


三 、 问 答题 


1. 简 述 Connection 对 象 、Recordset 对 象 和 
Command 对 象 之 间 的 区 别 和 联系 。 

2. 简 述 在 ASP 程序 中 使 用 Parameter 对 象 
向 存储 过 程 传递 参数 的 一 般 步 骤 。 

3. 简 述 Request 对 象 的 5 个 数据 集合 。 

4. 论述 Session 与 Application 对 象 的 区 别 。 


四 、 上 机 练习 


1. 制作 翻转 切换 开关 

jQuery Mobile (JQM) 已 经 成 为 jQuery 在 
手机 上 和 平板 设备 上 的 版 本 。jQM 不 仅 会 给 主流 
移动 平台 带 来 jQuery 核心 库 , 而 且 会 发 布 一 个 完 
整 统一 的 jQuery 移动 UI 框架。 在 本 练习 中 ， 将 
运用 该 功能 制作 翻转 切换 开关 , 如 图 11-14 所 示 。 
首先 在 [插入] 面板 中 的 jQurey Mobile 选项 卡 中 ， 
单 击 【页 面 】 按 钮 ， 添 加 页 面 结构 ， 并 设置 页 面 
标题 和 脚注 内 容 。 然 后 ， 选 中 并 删除 “内 容 ” 文 
本 。 在 jQurey Mobile 选项 卡 中 , 单 击 【翻转 切换 
开关 】 按 钮 , 添加 多 个 翻转 切换 开关 元 素 。 最后， 
在 【代码 】 视 图 中 ， 修 改 开关 文本 内 容 即 可 。 


翻转 切换 开关 


2015 年 5 月 12 日 哮 梢 划 人 工作 训 





[了 图 11-14 翻转 切换 开关 





2. 制作 按钮 式 选 项 卡 

在 本 练习 中 ， 将 运用 “jQuery UI” 功能 ， 制 
作 按 钮 式 选项 卡 ， 如 图 11-15 所 示 。 首 先 新 建 空 
白文 档 , 执行 【窗口 1【 插 入 】 命 令 , 在 【插入 】 
面板 中 选择 jQuery UI 选项 卡 ， 单 击 checkbox 


Buttons 按钮 。 然后， 切换 到 【代码 】 视 图 中 ， 


改 文本 内 容 即 可 。 





选择 题 
1、 工笔 是 哪 种 绘画 形式 的 技法 ? 





水 彩 画 ”油画 国画 





2、 广 激 读 是 从 哪 国 传 进 的 外 来 语 ? 





英国 | 上司 关 国 中 三 法 国 





3、 博 士 作为 官 名 最 早出 现在 ? 
秦 --| 一 汉 一 -~ 唐 











[了 图 11-15 按钮 式 选 项 卡 
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